web: toggle dark/light theme manually (#4876)

web/src/elements/CodeMirror.ts

@@ -18,6 +18,8 @@ import YAML from "yaml";
 
 import { customElement, property } from "lit/decorators.js";
 
+import { UiThemeEnum } from "@goauthentik/api";
+
 @customElement("ak-codemirror")
 export class CodeMirrorTextarea<T> extends AKElement {
     @property({ type: Boolean })
@@ -126,18 +128,17 @@ export class CodeMirrorTextarea<T> extends AKElement {
     }
 
     firstUpdated(): void {
-        const matcher = window.matchMedia("(prefers-color-scheme: light)");
-        const handler = (ev?: MediaQueryListEvent) => {
-            let theme;
-            if (ev?.matches || matcher.matches) {
-                theme = this.themeLight;
+        this.addEventListener("themeChange", ((ev: CustomEvent<UiThemeEnum>) => {
+            if (ev.detail === UiThemeEnum.Dark) {
+                this.editor?.dispatch({
+                    effects: this.theme.reconfigure(this.themeDark),
+                });
             } else {
-                theme = this.themeDark;
+                this.editor?.dispatch({
+                    effects: this.theme.reconfigure(this.themeLight),
+                });
             }
-            this.editor?.dispatch({
-                effects: this.theme.reconfigure(theme),
-            });
-        };
+        }) as EventListener);
         const extensions = [
             history(),
             keymap.of([...defaultKeymap, ...historyKeymap]),
@@ -148,7 +149,7 @@ export class CodeMirrorTextarea<T> extends AKElement {
             EditorView.lineWrapping,
             EditorState.readOnly.of(this.readOnly),
             EditorState.tabSize.of(2),
-            this.theme.of(this.themeLight),
+            this.theme.of(this.activeTheme === UiThemeEnum.Dark ? this.themeLight : this.themeDark),
         ];
         this.editor = new EditorView({
             extensions: extensions.filter((p) => p) as Extension[],
@@ -156,7 +157,5 @@ export class CodeMirrorTextarea<T> extends AKElement {
             doc: this._value,
         });
         this.shadowRoot?.appendChild(this.editor.dom);
-        matcher.addEventListener("change", handler);
-        handler();
     }
 }