feat(code): display user-selected color themes

apps/client/src/stylesheets/style.css

@@ -422,7 +422,6 @@ body.desktop #context-menu-container .dropdown-item > span {
 
 .cm-editor {
     height: 100%;
-    background: inherit;
     outline: none !important;
 }
 

apps/client/src/stylesheets/theme-dark.css

@@ -81,10 +81,6 @@ body ::-webkit-calendar-picker-indicator {
     filter: invert(1);
 }
 
-body .cm-editor {
-    filter: invert(90%) hue-rotate(180deg);
-}
-
 .excalidraw.theme--dark {
     --theme-filter: invert(80%) hue-rotate(180deg) !important;
 }

apps/client/src/stylesheets/theme-next-dark.css

@@ -244,10 +244,6 @@ body ::-webkit-calendar-picker-indicator {
     filter: invert(1);
 }
 
-body .cm-editor {
-    filter: invert(90%) hue-rotate(180deg);
-}
-
 .excalidraw.theme--dark {
     --theme-filter: invert(80%) hue-rotate(180deg) !important;
 }

apps/client/src/widgets/type_widgets/abstract_code_type_widget.ts

@@ -1,3 +1,4 @@
+import { getThemeById } from "@triliumnext/codemirror";
 import type FNote from "../../entities/fnote.js";
 import options from "../../services/options.js";
 import TypeWidget from "./type_widget.js";
@@ -31,6 +32,12 @@ export default class AbstractCodeTypeWidget extends TypeWidget {
             lineWrapping: options.is("codeLineWrapEnabled"),
             ...this.getExtraOpts()
         });
+
+        // Load the theme.
+        const theme = getThemeById(options.get("codeNoteTheme"));
+        if (theme) {
+            await this.codeEditor.setTheme(theme);
+        }
     }
 
     /**

packages/codemirror/src/color_themes.ts

@@ -16,4 +16,14 @@ const themes: ThemeDefinition[] = [
     }
 ]
 
+export function getThemeById(id: string) {
+    for (const theme of themes) {
+        if (theme.id === id) {
+            return theme;
+        }
+    }
+
+    return null;
+}
+
 export default themes;

packages/codemirror/src/index.ts

@@ -8,7 +8,7 @@ import byMimeType from "./syntax_highlighting.js";
 import smartIndentWithTab from "./extensions/custom_tab.js";
 import type { ThemeDefinition } from "./color_themes.js";
 
-export { default as ColorThemes, type ThemeDefinition } from "./color_themes.js";
+export { default as ColorThemes, type ThemeDefinition, getThemeById } from "./color_themes.js";
 
 type ContentChangedListener = () => void;
 
@@ -42,8 +42,9 @@ export default class CodeMirror extends EditorView {
         extensions = [
             ...extensions,
             languageCompartment.of([]),
-            syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
-            themeCompartment.of([]),
+            themeCompartment.of([
+                syntaxHighlighting(defaultHighlightStyle, { fallback: true })
+            ]),
             highlightActiveLine(),
             highlightSelectionMatches(),
             bracketMatching(),
@@ -108,7 +109,10 @@ export default class CodeMirror extends EditorView {
     }
 
     async setTheme(theme: ThemeDefinition) {
-        this.themeCompartment.reconfigure(await theme.load());
+        const extension = await theme.load();
+        this.dispatch({
+            effects: [ this.themeCompartment.reconfigure([ extension ]) ]
+        });
     }
 
     /**