diff --git a/src/components/common/Monaco/index.tsx b/src/components/common/Monaco/index.tsx
index f6f02bea..b3c67f9e 100644
--- a/src/components/common/Monaco/index.tsx
+++ b/src/components/common/Monaco/index.tsx
@@ -1,7 +1,13 @@
 import Editor, { EditorProps } from "@monaco-editor/react"
 import { useMonacoTheme } from "./use-theme"
+import { useMediaStore } from "~/hooks/useDarkMode"
 
 export function MonacoEditor(props: EditorProps) {
   useMonacoTheme()
-  return <Editor {...props} />
+  const isDark = useMediaStore((state) => state.isDark)
+
+  return (
+    // define initial theme
+    <Editor {...props} theme={props.theme ?? (isDark ? "dark" : "light")} />
+  )
 }