diff --git a/helpers/editor/codemirror.ts b/helpers/editor/codemirror.ts
index 3e9fe5d33..bd5e8a991 100644
--- a/helpers/editor/codemirror.ts
+++ b/helpers/editor/codemirror.ts
@@ -57,6 +57,8 @@ export function useCodemirror(
   value: Ref<string>,
   options: CodeMirrorOptions
 ) {
+  const { $colorMode } = useContext() as any
+
   const cm = ref<CodeMirror.Editor | null>(null)
 
   const updateEditorConfig = () => {
@@ -135,7 +137,6 @@ export function useCodemirror(
   })
 
   const setTheme = () => {
-    const { $colorMode } = useContext() as any
     if (cm.value) {
       cm.value?.setOption("theme", getThemeName($colorMode.value))
     }
@@ -175,6 +176,9 @@ export function useCodemirror(
     }
   })
 
+  // Watch color mode updates and update theme
+  watch(() => $colorMode.value, setTheme)
+
   return {
     cm,
   }