diff --git a/src/ScriptEditor/ui/ScriptEditorRoot.tsx b/src/ScriptEditor/ui/ScriptEditorRoot.tsx index b4579ea0b..da1da5b77 100644 --- a/src/ScriptEditor/ui/ScriptEditorRoot.tsx +++ b/src/ScriptEditor/ui/ScriptEditorRoot.tsx @@ -994,7 +994,10 @@ export function Root(props: IProps): React.ReactElement { setOptionsOpen(false)} + onClose={() => { + monacoRef.current?.editor.defineTheme("customTheme", makeTheme(Settings.EditorTheme)); + setOptionsOpen(false); + }} options={{ theme: Settings.MonacoTheme, insertSpaces: Settings.MonacoInsertSpaces, diff --git a/src/ScriptEditor/ui/ThemeEditorModal.tsx b/src/ScriptEditor/ui/ThemeEditorModal.tsx index 1feb6dcbb..bf979359d 100644 --- a/src/ScriptEditor/ui/ThemeEditorModal.tsx +++ b/src/ScriptEditor/ui/ThemeEditorModal.tsx @@ -1,6 +1,6 @@ import React, { useState } from "react"; import { Modal } from "../../ui/React/Modal"; -import { defaultMonacoTheme } from "./themes"; +import { defaultMonacoTheme, IScriptEditorTheme } from "./themes"; import Typography from "@mui/material/Typography"; import Button from "@mui/material/Button"; @@ -80,7 +80,7 @@ export function ThemeEditorModal(props: IProps): React.ReactElement { } // Need to deep copy the object since it has nested attributes - const [themeCopy, setThemeCopy] = useState(JSON.parse(JSON.stringify(Settings.EditorTheme))); + const [themeCopy, setThemeCopy] = useState(JSON.parse(JSON.stringify(Settings.EditorTheme))); function onColorChange(name: string, value: string): void { setThemeCopy(_.set(themeCopy, name, value)); @@ -98,7 +98,10 @@ export function ThemeEditorModal(props: IProps): React.ReactElement { } return ( - + { + setThemeCopy(Settings.EditorTheme); + props.onClose(); + }}> Customize Editor theme Hover over input boxes for more information