fix codemirror syntax highlighting in dark mode

see goauthentik/authentik#12811
BeryJu · Jan 25, 2025 · 881fd25 · 881fd25
1 parent 0cb17a3
commit 881fd25
Showing 1 changed file with 18 additions and 20 deletions.
diff --git a/web/src/elements/CodeMirror.ts b/web/src/elements/CodeMirror.ts
@@ -1,16 +1,11 @@
 import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
 import { javascript } from "@codemirror/lang-javascript";
-import {
-    LanguageSupport,
-    StreamLanguage,
-    defaultHighlightStyle,
-    syntaxHighlighting,
-} from "@codemirror/language";
+import { LanguageSupport, StreamLanguage, syntaxHighlighting } from "@codemirror/language";
 import * as yamlMode from "@codemirror/legacy-modes/mode/yaml";
 import { Compartment, EditorState, Extension } from "@codemirror/state";
 import { EditorView, drawSelection, keymap, lineNumbers } from "@codemirror/view";
-import { vsCodeDark } from "@fsegurai/codemirror-theme-vscode-dark";
-import { vsCodeLight } from "@fsegurai/codemirror-theme-vscode-light";
+import { vsCodeDark, vsCodeDarkHighlightStyle } from "@fsegurai/codemirror-theme-vscode-dark";
+import { vsCodeLight, vsCodeLightHighlightStyle } from "@fsegurai/codemirror-theme-vscode-light";
 import YAML from "yaml";
 
 import { customElement, property } from "lit/decorators.js";
@@ -32,10 +27,14 @@ export class CodeMirrorTextarea extends AKElement {
 
     _value?: string;
 
-    theme: Compartment;
+    theme = new Compartment();
+    syntaxHighlight = new Compartment();
 
-    themeLight: Extension;
-    themeDark: Extension;
+    themeLight = vsCodeLight;
+    themeDark = vsCodeDark;
+
+    syntaxHighlightLight = syntaxHighlighting(vsCodeLightHighlightStyle);
+    syntaxHighlightDark = syntaxHighlighting(vsCodeDarkHighlightStyle);
 
     @property()
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -78,13 +77,6 @@ export class CodeMirrorTextarea extends AKElement {
         }
     }
 
-    constructor() {
-        super();
-        this.theme = new Compartment();
-        this.themeLight = vsCodeLight;
-        this.themeDark = vsCodeDark;
-    }
-
     private getInnerValue(): string {
         if (!this.editor) {
             return "";
@@ -106,25 +98,31 @@ export class CodeMirrorTextarea extends AKElement {
         const matcher = window.matchMedia("(prefers-color-scheme: light)");
         const handler = (ev?: MediaQueryListEvent) => {
             let theme;
+            let syntaxHighlight;
             if (ev?.matches || matcher.matches) {
                 theme = this.themeLight;
+                syntaxHighlight = this.syntaxHighlightLight;
             } else {
                 theme = this.themeDark;
+                syntaxHighlight = this.syntaxHighlightDark;
             }
             this.editor?.dispatch({
-                effects: this.theme.reconfigure(theme),
+                effects: [
+                    this.theme.reconfigure(theme),
+                    this.syntaxHighlight.reconfigure(syntaxHighlight),
+                ],
             });
         };
         const extensions = [
             history(),
             keymap.of([...defaultKeymap, ...historyKeymap]),
-            syntaxHighlighting(defaultHighlightStyle),
             this.getLanguageExtension(),
             lineNumbers(),
             drawSelection(),
             EditorView.lineWrapping,
             EditorState.readOnly.of(this.readOnly),
             EditorState.tabSize.of(2),
+            this.syntaxHighlight.of(this.syntaxHighlightLight),
             this.theme.of(this.themeLight),
         ];
         this.editor = new EditorView({