From da9a31f2b29e1dcca9ac9f25e796798c99b6ed05 Mon Sep 17 00:00:00 2001
From: Timothee Guerin <tiguerin@microsoft.com>
Date: Mon, 14 Oct 2024 09:34:06 -0700
Subject: [PATCH] Fix editor dark theme (#4719)

---
 .chronus/changes/fix-editor-dark-theme-2024-9-14-8-3-1.md | 7 +++++++
 packages/playground/src/react/editor.tsx                  | 4 ----
 packages/playground/src/react/playground.tsx              | 4 ++++
 packages/playground/src/services.ts                       | 1 -
 4 files changed, 11 insertions(+), 5 deletions(-)
 create mode 100644 .chronus/changes/fix-editor-dark-theme-2024-9-14-8-3-1.md

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
new file mode 100644
index 0000000000..20b986f0c4
--- /dev/null
+++ 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
index 238a46ee9d..ce293c413a 100644
--- 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
index 8356f815f0..d23879e9d8 100644
--- 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
index a903ca051b..b556785e4a 100644
--- 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() {