feature: website light / dark / system theme

web/landing/assets/codemirror/themes/theme-flow.js

@@ -145,3 +145,147 @@ export const flowThemeExtension = [
     flowTheme,
     syntaxHighlighting(flowHighlightStyle)
 ]
+
+/* Light variant — stock prism-inspired palette on near-white background. */
+export const flowLightTheme = EditorView.theme({
+    "&": {
+        backgroundColor: "#ffffff",
+        color: "#1f2937",
+        height: "100%"
+    },
+    ".cm-content": {
+        fontSize: "16px",
+        lineHeight: "1.4",
+        caretColor: "#0f172a"
+    },
+    ".cm-cursor, .cm-dropCursor": {
+        borderLeftColor: "#0f172a"
+    },
+    ".cm-selectionBackground, ::selection": {
+        backgroundColor: "rgba(99, 102, 241, 0.15)"
+    },
+    "&.cm-focused .cm-selectionBackground": {
+        backgroundColor: "rgba(99, 102, 241, 0.18)"
+    },
+    ".cm-activeLine": {
+        backgroundColor: "rgba(15, 23, 42, 0.04)"
+    },
+    ".cm-gutters": {
+        backgroundColor: "#ffffff",
+        color: "#94a3b8",
+        border: "none"
+    },
+    ".cm-activeLineGutter": {
+        backgroundColor: "rgba(15, 23, 42, 0.04)"
+    },
+    ".cm-foldPlaceholder": {
+        backgroundColor: "#dd4a68",
+        border: "none",
+        color: "#ffffff"
+    },
+    ".cm-searchMatch": {
+        backgroundColor: "rgba(7, 119, 170, 0.25)"
+    },
+    ".cm-searchMatch.cm-searchMatch-selected": {
+        backgroundColor: "rgba(7, 119, 170, 0.45)"
+    },
+    ".cm-error": {
+        backgroundColor: "rgba(221, 74, 104, 0.12)",
+        borderLeft: "3px solid #dd4a68"
+    },
+    ".cm-tooltip.cm-tooltip-autocomplete": {
+        backgroundColor: "#ffffff",
+        border: "1px solid #cbd5e1",
+        borderRadius: "8px",
+        boxShadow: "0 8px 32px rgba(15, 23, 42, 0.12)",
+        fontFamily: "'Cabin Variable', system-ui",
+        fontSize: "16px",
+        padding: "6px"
+    },
+    ".cm-tooltip-autocomplete ul": {
+        fontFamily: "inherit",
+        maxHeight: "400px"
+    },
+    ".cm-tooltip-autocomplete ul li": {
+        padding: "8px 14px",
+        borderRadius: "5px",
+        margin: "2px 0",
+        color: "#1f2937",
+        cursor: "pointer"
+    },
+    ".cm-tooltip-autocomplete ul li[aria-selected]": {
+        background: "linear-gradient(90deg, #07a 0%, #0991c2 100%)",
+        color: "#ffffff",
+        fontWeight: "600"
+    },
+    ".cm-completionLabel": {
+        color: "inherit"
+    },
+    ".cm-completionDetail": {
+        color: "#64748b",
+        fontSize: "12px",
+        fontStyle: "italic",
+        marginLeft: "16px"
+    },
+    ".cm-tooltip-autocomplete ul li[aria-selected] .cm-completionDetail": {
+        color: "#e0f2fe",
+        fontWeight: "500"
+    },
+    ".cm-completionIcon": {
+        fontSize: "14px",
+        width: "1em",
+        lineHeight: "1",
+        marginRight: "8px",
+        textAlign: "center",
+        paddingRight: "4px"
+    },
+    ".cm-completionIcon-function": { color: "#dd4a68" },
+    ".cm-completionIcon-class": { color: "#07a" },
+    ".cm-completionIcon-keyword": { color: "#07a" },
+    ".cm-completionIcon-variable": { color: "#1f2937" },
+    ".cm-completionIcon-constant": { color: "#905" },
+    ".cm-completionIcon-type": { color: "#07a" },
+    ".cm-completionIcon-namespace": { color: "#dd4a68" },
+    ".cm-tooltip.cm-completionInfo": {
+        backgroundColor: "#ffffff",
+        border: "1px solid #cbd5e1",
+        borderRadius: "8px",
+        boxShadow: "0 8px 32px rgba(15, 23, 42, 0.12)",
+        color: "#1f2937",
+        fontFamily: "'Cabin Variable', system-ui",
+        fontSize: "14px",
+        maxWidth: "600px",
+        padding: "16px"
+    },
+    ".cm-completionInfo code": {
+        backgroundColor: "#f1f5f9",
+        padding: "2px 6px",
+        borderRadius: "4px",
+        fontFamily: "'Fira Code', 'JetBrains Mono', 'Consolas', monospace",
+        fontSize: "13px"
+    }
+}, { dark: false })
+
+export const flowLightHighlightStyle = HighlightStyle.define([
+    { tag: t.keyword, color: "#07a" },
+    { tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName], color: "#1f2937" },
+    { tag: [t.function(t.variableName), t.labelName], color: "#dd4a68" },
+    { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: "#905" },
+    { tag: [t.definition(t.name), t.separator], color: "#1f2937" },
+    { tag: [t.typeName, t.className, t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: "#905" },
+    { tag: [t.operator, t.operatorKeyword, t.url, t.escape, t.regexp, t.link, t.special(t.string)], color: "#9a6e3a" },
+    { tag: [t.meta, t.comment], color: "#708090" },
+    { tag: t.strong, fontWeight: "bold" },
+    { tag: t.emphasis, fontStyle: "italic" },
+    { tag: t.strikethrough, textDecoration: "line-through" },
+    { tag: t.link, color: "#07a", textDecoration: "underline" },
+    { tag: t.heading, fontWeight: "bold", color: "#07a" },
+    { tag: [t.atom, t.bool, t.special(t.variableName)], color: "#905" },
+    { tag: [t.processingInstruction, t.string, t.inserted], color: "#690" },
+    { tag: t.invalid, color: "#ffffff", backgroundColor: "#dd4a68" }
+])
+
+export const flowLightThemeExtension = [
+    flowLightTheme,
+    syntaxHighlighting(flowLightHighlightStyle)
+]

web/landing/assets/controllers/code_editor_controller.js

@@ -1,12 +1,12 @@
 import { Controller } from "@hotwired/stimulus"
 import { EditorView, basicSetup } from "codemirror"
-import { EditorState, StateField, StateEffect } from "@codemirror/state"
+import { EditorState, StateField, StateEffect, Compartment } from "@codemirror/state"
 import { Decoration } from "@codemirror/view"
 import { keymap } from "@codemirror/view"
 import { php } from "@codemirror/lang-php"
 import { autocompletion, snippetKeymap, acceptCompletion } from "@codemirror/autocomplete"
 import { indentWithTab } from "@codemirror/commands"
-import { flowThemeExtension } from "../codemirror/themes/theme-flow.js"
+import { flowThemeExtension, flowLightThemeExtension } from "../codemirror/themes/theme-flow.js"
 import { flowCompletions } from "../codemirror/completions/flow.js"
 import { dslCompletions } from "../codemirror/completions/dsl.js"
 import { dataframeCompletions } from "../codemirror/completions/dataframe.js"
@@ -19,6 +19,8 @@ export default class extends Controller {
     #textarea
     #errorEffect
     #editorReady = false
+    #themeCompartment = new Compartment()
+    #onThemeChanged = null
 
     #log(...args) {
         if (this.#debug) {
@@ -61,7 +63,7 @@ export default class extends Controller {
             extensions: [
                 basicSetup,
                 php(),
-                flowThemeExtension,
+                this.#themeCompartment.of(this.#currentThemeExtension()),
                 errorField,
                 keymap.of(snippetKeymap),
                 keymap.of([indentWithTab]),
@@ -92,6 +94,22 @@ export default class extends Controller {
         this.#debug = this.application.debug
         this.#log('Connecting Code editor controller')
         this.#initializeEditor()
+
+        this.#onThemeChanged = this.#handleThemeChange.bind(this)
+        document.addEventListener('theme:changed', this.#onThemeChanged)
+    }
+
+    #currentThemeExtension() {
+        return document.documentElement.getAttribute('data-theme') === 'dark'
+            ? flowThemeExtension
+            : flowLightThemeExtension
+    }
+
+    #handleThemeChange() {
+        if (!this.#editor) return
+        this.#editor.dispatch({
+            effects: this.#themeCompartment.reconfigure(this.#currentThemeExtension())
+        })
     }
 
     isReady() {
@@ -116,6 +134,9 @@ export default class extends Controller {
     }
 
     disconnect() {
+        if (this.#onThemeChanged) {
+            document.removeEventListener('theme:changed', this.#onThemeChanged)
+        }
         if (this.#editor) {
             this.#editor.destroy()
             this.#editor = null

web/landing/assets/controllers/mermaid_controller.js

@@ -4,24 +4,57 @@ import Panzoom from '@panzoom/panzoom';
 export default class extends Controller {
     static targets = ['svg', 'zoomIn', 'zoomOut'];
 
+    #originalSource = null;
+    #onThemeChanged = null;
+    #panzoom = null;
+
     connect() {
+        this.#originalSource = this.svgTarget.textContent;
+        this.#render();
+
+        this.#onThemeChanged = this.#handleThemeChange.bind(this);
+        document.addEventListener('theme:changed', this.#onThemeChanged);
+    }
+
+    disconnect() {
+        if (this.#onThemeChanged) {
+            document.removeEventListener('theme:changed', this.#onThemeChanged);
+        }
+    }
+
+    #handleThemeChange(event) {
+        const resolved = event.detail?.resolved || 'light';
+        mermaid.initialize({
+            startOnLoad: false,
+            theme: resolved === 'dark' ? 'dark' : 'default',
+            securityLevel: 'loose',
+            flowchart: { useMaxWidth: true, htmlLabels: true },
+        });
+
+        this.svgTarget.removeAttribute('data-processed');
+        this.svgTarget.innerHTML = '';
+        this.svgTarget.textContent = this.#originalSource;
+        this.#render();
+    }
+
+    #render() {
         mermaid.run({
             nodes: [this.svgTarget],
-            postRenderCallback: (id) => {
-                let panzoom = Panzoom(this.svgTarget, {});
-                panzoom.pan(0, 0)
-                this.element.addEventListener('wheel', panzoom.zoomWithWheel)
+            postRenderCallback: () => {
+                this.#panzoom = Panzoom(this.svgTarget, {});
+                this.#panzoom.pan(0, 0);
+                this.element.addEventListener('wheel', this.#panzoom.zoomWithWheel);
 
                 this.zoomInTarget.addEventListener('click', (event) => {
                     event.preventDefault();
-                    panzoom.zoomIn();
+                    this.#panzoom.zoomIn();
                 });
 
                 this.zoomOutTarget.addEventListener('click', (event) => {
                     event.preventDefault();
-                    panzoom.zoomOut();
+                    this.#panzoom.zoomOut();
                 });
-            }
+            },
         });
     }
-}
+}