Fix editor dark theme (#4719)

microsoft · Oct 14, 2024 · da9a31f · da9a31f
1 parent 267a4f9
commit da9a31f
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 5 deletions.
diff --git a/.chronus/changes/fix-editor-dark-theme-2024-9-14-8-3-1.md b/.chronus/changes/fix-editor-dark-theme-2024-9-14-8-3-1.md
@@ -0,0 +1,7 @@
+---
+changeKind: fix
+packages:
+  - "@typespec/playground"
+---
+
+Fix dark theme not applying
diff --git a/packages/playground/src/react/editor.tsx b/packages/playground/src/react/editor.tsx
@@ -32,10 +32,6 @@ export const Editor: FunctionComponent<EditorProps> = ({ model, options, actions
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  useEffect(() => {
-    editor.setTheme(options.theme ?? "typespec");
-  }, [options.theme]);
-
   useEffect(() => {
     const disposables: IDisposable[] = [];
     for (const command of actions ?? []) {

diff --git a/packages/playground/src/react/playground.tsx b/packages/playground/src/react/playground.tsx
@@ -110,6 +110,10 @@ export const Playground: FunctionComponent<PlaygroundProps> = (props) => {
   const { host, onSave } = props;
   const editorRef = useRef<editor.IStandaloneCodeEditor | undefined>(undefined);
 
+  useEffect(() => {
+    editor.setTheme(props.editorOptions?.theme ?? "typespec");
+  }, [props.editorOptions?.theme]);
+
   const [selectedEmitter, onSelectedEmitterChange] = useControllableValue(
     props.emitter,
     props.defaultEmitter,

diff --git a/packages/playground/src/services.ts b/packages/playground/src/services.ts
@@ -329,7 +329,6 @@ export async function registerMonacoLanguage(host: BrowserHost) {
       { token: "function", foreground: "#E06C75" },
     ],
   });
-  monaco.editor.setTheme("typespec");
 
   monaco.languages.registerDocumentSemanticTokensProvider("typespec", {
     getLegend() {