diff --git a/apps/client/src/widgets/type_widgets/code/CodeMirror.tsx b/apps/client/src/widgets/type_widgets/code/CodeMirror.tsx
index 98720ddb5..971216e79 100644
--- a/apps/client/src/widgets/type_widgets/code/CodeMirror.tsx
+++ b/apps/client/src/widgets/type_widgets/code/CodeMirror.tsx
@@ -1,8 +1,9 @@
 import { useEffect, useRef } from "preact/hooks";
-import { EditorConfig, default as VanillaCodeMirror } from "@triliumnext/codemirror";
-import { useSyncedRef, useTriliumEvent, useTriliumOptionBool } from "../../react/hooks";
+import { EditorConfig, getThemeById, default as VanillaCodeMirror } from "@triliumnext/codemirror";
+import { useSyncedRef, useTriliumEvent, useTriliumOption, useTriliumOptionBool } from "../../react/hooks";
 import { refToJQuerySelector } from "../../react/react_utils";
 import { RefObject } from "preact";
+import { CODE_THEME_DEFAULT_PREFIX as DEFAULT_PREFIX } from "../constants";
 
 interface CodeMirrorProps extends Omit<EditorConfig, "parent"> {
     content: string;
@@ -17,6 +18,7 @@ export default function CodeMirror({ className, content, mime, ntxId, editorRef:
     const parentRef = useSyncedRef(externalContainerRef);
     const codeEditorRef = useRef<VanillaCodeMirror>();
     const [ codeLineWrapEnabled ] = useTriliumOptionBool("codeLineWrapEnabled");
+    const [ codeNoteTheme ] = useTriliumOption("codeNoteTheme");
     const initialized = $.Deferred();
 
     // Integration within Trilium's event system.
@@ -50,6 +52,16 @@ export default function CodeMirror({ className, content, mime, ntxId, editorRef:
         return () => codeEditor.destroy();
     }, []);
 
+    // React to theme changes.
+    useEffect(() => {
+        if (codeEditorRef.current && codeNoteTheme.startsWith(DEFAULT_PREFIX)) {
+            const theme = getThemeById(codeNoteTheme.substring(DEFAULT_PREFIX.length));
+            if (theme) {
+                codeEditorRef.current.setTheme(theme);
+            }
+        }
+    }, [ codeEditorRef, codeNoteTheme ]);
+
     // React to text changes.
     useEffect(() => {
         const codeEditor = codeEditorRef.current;
diff --git a/apps/client/src/widgets/type_widgets_old/abstract_code_type_widget.ts b/apps/client/src/widgets/type_widgets_old/abstract_code_type_widget.ts
index 055e7f450..38e2713d4 100644
--- a/apps/client/src/widgets/type_widgets_old/abstract_code_type_widget.ts
+++ b/apps/client/src/widgets/type_widgets_old/abstract_code_type_widget.ts
@@ -30,13 +30,7 @@ export default class AbstractCodeTypeWidget extends TypeWidget {
 
     async #initEditor() {
         // Load the theme.
-        const themeId = options.get("codeNoteTheme");
-        if (themeId?.startsWith(DEFAULT_PREFIX)) {
-            const theme = getThemeById(themeId.substring(DEFAULT_PREFIX.length));
-            if (theme) {
-                await this.codeEditor.setTheme(theme);
-            }
-        }
+
     }
 
     /**