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() {