diff --git a/web/landing/assets/codemirror/themes/theme-flow.js b/web/landing/assets/codemirror/themes/theme-flow.js
index 549fd045c5..5929e75978 100644
--- a/web/landing/assets/codemirror/themes/theme-flow.js
+++ b/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)
+]
diff --git a/web/landing/assets/controllers/code_editor_controller.js b/web/landing/assets/controllers/code_editor_controller.js
index 180db709ef..c072890b2f 100644
--- a/web/landing/assets/controllers/code_editor_controller.js
+++ b/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
diff --git a/web/landing/assets/controllers/mermaid_controller.js b/web/landing/assets/controllers/mermaid_controller.js
index 5de50ad254..ac692e8513 100644
--- a/web/landing/assets/controllers/mermaid_controller.js
+++ b/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();
                 });
-            }
+            },
         });
     }
-}
\ No newline at end of file
+}
diff --git a/web/landing/assets/controllers/theme_switch_controller.js b/web/landing/assets/controllers/theme_switch_controller.js
new file mode 100644
index 0000000000..5de044f69a
--- /dev/null
+++ b/web/landing/assets/controllers/theme_switch_controller.js
@@ -0,0 +1,127 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+    static targets = ['menu', 'option', 'currentIcon'];
+
+    #mediaQuery = null;
+    #onMediaChange = null;
+    #onDocumentClick = null;
+    #onEscape = null;
+
+    connect() {
+        this.#mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        this.#onMediaChange = this.#handleMediaChange.bind(this);
+        this.#onDocumentClick = this.#handleDocumentClick.bind(this);
+        this.#onEscape = this.#handleEscape.bind(this);
+
+        this.#mediaQuery.addEventListener('change', this.#onMediaChange);
+        document.addEventListener('click', this.#onDocumentClick);
+        document.addEventListener('keydown', this.#onEscape);
+
+        this.#syncUi();
+    }
+
+    disconnect() {
+        if (this.#mediaQuery && this.#onMediaChange) {
+            this.#mediaQuery.removeEventListener('change', this.#onMediaChange);
+        }
+        if (this.#onDocumentClick) {
+            document.removeEventListener('click', this.#onDocumentClick);
+        }
+        if (this.#onEscape) {
+            document.removeEventListener('keydown', this.#onEscape);
+        }
+    }
+
+    toggle(event) {
+        event.preventDefault();
+        event.stopPropagation();
+
+        if (!this.hasMenuTarget) return;
+
+        this.menuTarget.classList.toggle('hidden');
+    }
+
+    select(event) {
+        const choice = event.currentTarget.dataset.themeOption;
+
+        if (choice === 'system') {
+            localStorage.removeItem('theme');
+        } else {
+            localStorage.setItem('theme', choice);
+        }
+
+        this.#apply();
+        this.#syncUi();
+        this.#close();
+    }
+
+    #handleMediaChange() {
+        if (this.#currentChoice() !== 'system') return;
+        this.#apply();
+    }
+
+    #handleDocumentClick(event) {
+        if (!this.hasMenuTarget) return;
+        if (this.menuTarget.classList.contains('hidden')) return;
+        if (this.element.contains(event.target)) return;
+
+        this.#close();
+    }
+
+    #handleEscape(event) {
+        if (event.key !== 'Escape') return;
+        if (!this.hasMenuTarget) return;
+        if (this.menuTarget.classList.contains('hidden')) return;
+
+        this.#close();
+    }
+
+    #close() {
+        if (!this.hasMenuTarget) return;
+        this.menuTarget.classList.add('hidden');
+    }
+
+    #currentChoice() {
+        const stored = localStorage.getItem('theme');
+        return stored === 'light' || stored === 'dark' ? stored : 'system';
+    }
+
+    #resolved() {
+        const choice = this.#currentChoice();
+        if (choice === 'dark') return 'dark';
+        if (choice === 'light') return 'light';
+        return this.#mediaQuery.matches ? 'dark' : 'light';
+    }
+
+    #apply() {
+        const resolved = this.#resolved();
+
+        if (resolved === 'dark') {
+            document.documentElement.setAttribute('data-theme', 'dark');
+        } else {
+            document.documentElement.removeAttribute('data-theme');
+        }
+
+        document.dispatchEvent(new CustomEvent('theme:changed', {
+            detail: { resolved, choice: this.#currentChoice() },
+        }));
+    }
+
+    #syncUi() {
+        const choice = this.#currentChoice();
+
+        this.optionTargets.forEach((el) => {
+            const isActive = el.dataset.themeOption === choice;
+            el.setAttribute('aria-checked', isActive ? 'true' : 'false');
+            el.dataset.active = isActive ? 'true' : 'false';
+        });
+
+        if (this.hasCurrentIconTarget) {
+            this.currentIconTargets.forEach((el) => {
+                const matches = el.dataset.themeIcon === choice;
+                el.classList.toggle('hidden', !matches);
+            });
+        }
+    }
+}
diff --git a/web/landing/assets/images/icons/monitor.svg b/web/landing/assets/images/icons/monitor.svg
new file mode 100644
index 0000000000..dfac3fd478
--- /dev/null
+++ b/web/landing/assets/images/icons/monitor.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+    <rect x="2" y="3" width="20" height="14" rx="2"/>
+    <path d="M8 21h8M12 17v4"/>
+</svg>
diff --git a/web/landing/assets/images/icons/moon.svg b/web/landing/assets/images/icons/moon.svg
new file mode 100644
index 0000000000..85e6c72436
--- /dev/null
+++ b/web/landing/assets/images/icons/moon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
+</svg>
diff --git a/web/landing/assets/images/icons/sun.svg b/web/landing/assets/images/icons/sun.svg
new file mode 100644
index 0000000000..147c35d49d
--- /dev/null
+++ b/web/landing/assets/images/icons/sun.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+    <circle cx="12" cy="12" r="4"/>
+    <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/>
+</svg>
diff --git a/web/landing/assets/prismjs/themes/prism-flow.css b/web/landing/assets/prismjs/themes/prism-flow.css
index 82a0761d4d..6b88850386 100644
--- a/web/landing/assets/prismjs/themes/prism-flow.css
+++ b/web/landing/assets/prismjs/themes/prism-flow.css
@@ -1,14 +1,14 @@
 /**
- * okaidia theme for JavaScript, CSS and HTML
- * Loosely based on Monokai textmate theme by http://www.monokai.nl/
- * @author ocodia
+ * Flow PHP Prism theme.
+ *
+ * Light: based on stock prism.css (low-contrast pastel tokens on near-white).
+ * Dark: okaidia-inspired (loosely based on Monokai by http://www.monokai.nl/).
  */
 
 code[class*="language-"],
 pre[class*="language-"] {
-    color: #f8f8f2;
+    color: #1f2937;
     background: transparent;
-    text-shadow: 0 1px rgba(0, 0, 0, 0.3);
     font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
     font-size: 16px;
     text-align: left;
@@ -28,6 +28,12 @@ pre[class*="language-"] {
     hyphens: none;
 }
 
+[data-theme="dark"] code[class*="language-"],
+[data-theme="dark"] pre[class*="language-"] {
+    color: #f8f8f2;
+    text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+}
+
 /* Code blocks */
 pre[class*="language-"] {
     padding: 1em;
@@ -48,17 +54,18 @@ pre[class*="language-"] {
     white-space: normal;
 }
 
+/* ---------- Light tokens (stock prism palette) ---------- */
 .token.comment,
 .token.prolog,
 .token.doctype,
 .token.cdata {
-    color: #8292a2;
+    color: #708090;
 }
 
 .token.operator,
 .token.punctuation,
 .token.package {
-    color: #f8f8f2;
+    color: #9a6e3a;
 }
 
 .token.namespace {
@@ -70,12 +77,12 @@ pre[class*="language-"] {
 .token.constant,
 .token.symbol,
 .token.deleted {
-    color: #ff7b72;
+    color: #905;
 }
 
 .token.boolean,
 .token.number {
-    color: #79c0ff;
+    color: #905;
 }
 
 .token.selector,
@@ -84,7 +91,7 @@ pre[class*="language-"] {
 .token.char,
 .token.builtin,
 .token.inserted {
-    color: #79c0ff;
+    color: #690;
 }
 
 .token.entity,
@@ -92,23 +99,23 @@ pre[class*="language-"] {
 .language-css .token.string,
 .style .token.string,
 .token.variable {
-    color: #79c0ff;
+    color: #9a6e3a;
 }
 
 .token.atrule,
 .token.attr-value,
 .token.function,
 .token.class-name {
-    color: #d2a8ff;
+    color: #dd4a68;
 }
 
 .token.keyword {
-    color: #ff7b72;
+    color: #07a;
 }
 
 .token.regex,
 .token.important {
-    color: #79c0ff;
+    color: #e90;
 }
 
 .token.important,
@@ -121,4 +128,64 @@ pre[class*="language-"] {
 
 .token.entity {
     cursor: help;
-}
\ No newline at end of file
+}
+
+/* ---------- Dark tokens (okaidia-inspired) ---------- */
+[data-theme="dark"] .token.comment,
+[data-theme="dark"] .token.prolog,
+[data-theme="dark"] .token.doctype,
+[data-theme="dark"] .token.cdata {
+    color: #8292a2;
+}
+
+[data-theme="dark"] .token.operator,
+[data-theme="dark"] .token.punctuation,
+[data-theme="dark"] .token.package {
+    color: #f8f8f2;
+}
+
+[data-theme="dark"] .token.property,
+[data-theme="dark"] .token.tag,
+[data-theme="dark"] .token.constant,
+[data-theme="dark"] .token.symbol,
+[data-theme="dark"] .token.deleted {
+    color: #ff7b72;
+}
+
+[data-theme="dark"] .token.boolean,
+[data-theme="dark"] .token.number {
+    color: #79c0ff;
+}
+
+[data-theme="dark"] .token.selector,
+[data-theme="dark"] .token.attr-name,
+[data-theme="dark"] .token.string,
+[data-theme="dark"] .token.char,
+[data-theme="dark"] .token.builtin,
+[data-theme="dark"] .token.inserted {
+    color: #79c0ff;
+}
+
+[data-theme="dark"] .token.entity,
+[data-theme="dark"] .token.url,
+[data-theme="dark"] .language-css .token.string,
+[data-theme="dark"] .style .token.string,
+[data-theme="dark"] .token.variable {
+    color: #79c0ff;
+}
+
+[data-theme="dark"] .token.atrule,
+[data-theme="dark"] .token.attr-value,
+[data-theme="dark"] .token.function,
+[data-theme="dark"] .token.class-name {
+    color: #d2a8ff;
+}
+
+[data-theme="dark"] .token.keyword {
+    color: #ff7b72;
+}
+
+[data-theme="dark"] .token.regex,
+[data-theme="dark"] .token.important {
+    color: #79c0ff;
+}
diff --git a/web/landing/assets/styles/app.css b/web/landing/assets/styles/app.css
index e111483c8a..b3dc7a2f09 100644
--- a/web/landing/assets/styles/app.css
+++ b/web/landing/assets/styles/app.css
@@ -9,10 +9,14 @@ body {
     font-feature-settings: "ss01", "cv11";
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    background-image: radial-gradient(ellipse 80rem 40rem at 50% -20%, rgba(128, 109, 254, 0.18), transparent 60%);
+    background-image: radial-gradient(ellipse 80rem 40rem at 50% -20%, rgba(128, 109, 254, 0.08), transparent 60%);
     background-attachment: fixed;
 }
 
+[data-theme="dark"] body {
+    background-image: radial-gradient(ellipse 80rem 40rem at 50% -20%, rgba(128, 109, 254, 0.18), transparent 60%);
+}
+
 html {
     scroll-behavior: smooth;
 }
@@ -28,8 +32,9 @@ html {
 /* Surfaces — a single source of truth for card backgrounds, replacing the
    repeated `rounded ... shadow-2xl shadow-gray border-gray border-2` pattern. */
 .card {
-    @apply relative rounded-xl border border-white/10 bg-white/[0.03] p-6
-           transition-colors duration-200;
+    @apply relative rounded-xl border border-slate-200 bg-white p-6
+           transition-colors duration-200
+           dark:border-white/10 dark:bg-white/[0.03];
 }
 
 .card > *:last-child {
@@ -37,22 +42,25 @@ html {
 }
 
 .card-hover {
-    @apply hover:border-white/20 hover:bg-white/[0.05];
+    @apply hover:border-slate-300 hover:bg-slate-50
+           dark:hover:border-white/20 dark:hover:bg-white/[0.05];
 }
 
 .card-accent {
-    @apply relative rounded-xl border border-blue-100/30 bg-blue-100/[0.06] p-6;
+    @apply relative rounded-xl border border-blue-300/30 bg-blue-300/[0.05] p-6
+           dark:border-blue-100/30 dark:bg-blue-100/[0.06];
 }
 
 .card-accent::before {
     content: "";
     @apply pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r
-           from-transparent via-blue-100/60 to-transparent;
+           from-transparent via-blue-300/50 to-transparent
+           dark:via-blue-100/60;
 }
 
 .eyebrow {
     @apply inline-flex items-center gap-2 text-xs font-semibold uppercase
-           tracking-[0.18em] text-blue-100;
+           tracking-[0.18em] text-blue-300 dark:text-blue-100;
 }
 
 .section-title {
@@ -60,7 +68,7 @@ html {
 }
 
 .muted {
-    @apply text-white/70;
+    @apply text-slate-600 dark:text-white/70;
 }
 
 .btn {
@@ -73,12 +81,13 @@ html {
 }
 
 .btn-secondary {
-    @apply border border-white/15 bg-white/[0.04] hover:border-white/25
-           hover:bg-white/[0.08];
+    @apply border border-slate-300 bg-white text-slate-900 hover:border-slate-400 hover:bg-slate-50
+           dark:border-white/15 dark:bg-white/[0.04] dark:text-white
+           dark:hover:border-white/25 dark:hover:bg-white/[0.08];
 }
 
 .btn-ghost {
-    @apply text-white/80 hover:text-white;
+    @apply text-slate-700 hover:text-slate-900 dark:text-white/80 dark:hover:text-white;
 }
 
 .btn img {
@@ -87,21 +96,21 @@ html {
 
 
 nav a {
-    @apply font-medium text-white dark:text-white hover:underline;
+    @apply font-medium text-slate-900 dark:text-white hover:underline;
 }
 
 footer a {
-    @apply font-medium text-white dark:text-white hover:underline;
+    @apply font-medium text-slate-900 dark:text-white hover:underline;
 }
 
 a {
     font-weight: normal;
-    @apply font-medium text-blue-600 dark:text-blue-500 hover:underline;
+    @apply font-medium text-blue-300 hover:underline dark:text-blue-100;
 }
 
 .link {
     font-weight: normal;
-    @apply font-medium text-blue-600 dark:text-blue-500 hover:underline;
+    @apply font-medium text-blue-300 hover:underline dark:text-blue-100;
 }
 
 code {
@@ -110,23 +119,24 @@ code {
 
 /* Blog post prose. Wraps full-width with comfortable reading measure. */
 #blog-post {
-    @apply pb-5 px-4 sm:px-6 lg:px-8 mx-auto max-w-3xl text-white/85;
+    @apply pb-5 px-4 sm:px-6 lg:px-8 mx-auto max-w-3xl text-slate-700 dark:text-white/85;
 }
 
 #blog-post a {
-    @apply text-blue-100 underline-offset-2 hover:text-orange-100 transition-colors;
+    @apply text-blue-300 underline-offset-2 hover:text-orange-300 transition-colors
+           dark:text-blue-100 dark:hover:text-orange-100;
 }
 
 #blog-post h1 {
-    @apply font-bold text-3xl sm:text-4xl tracking-tight text-white mt-2 mb-5;
+    @apply font-bold text-3xl sm:text-4xl tracking-tight text-slate-900 mt-2 mb-5 dark:text-white;
 }
 
 #blog-post h2 {
-    @apply font-bold text-2xl tracking-tight text-white mt-10 mb-3;
+    @apply font-bold text-2xl tracking-tight text-slate-900 mt-10 mb-3 dark:text-white;
 }
 
 #blog-post h3 {
-    @apply font-semibold text-xl text-white mt-7 mb-2;
+    @apply font-semibold text-xl text-slate-900 mt-7 mb-2 dark:text-white;
 }
 
 #blog-post p,
@@ -144,11 +154,12 @@ code {
 }
 
 #blog-post hr {
-    @apply my-8 border-0 h-px bg-white/10;
+    @apply my-8 border-0 h-px bg-slate-200 dark:bg-white/10;
 }
 
 #blog-post pre {
-    @apply rounded-xl my-6 p-4 overflow-auto border border-white/10 bg-white/[0.03];
+    @apply rounded-xl my-6 p-4 overflow-auto border border-slate-200 bg-white
+           dark:border-white/10 dark:bg-white/[0.03];
 }
 
 #blog-post pre code {
@@ -156,23 +167,27 @@ code {
 }
 
 #blog-post :not(pre) > code {
-    @apply font-mono text-[0.9em] px-1.5 py-0.5 rounded bg-white/[0.06] text-[#d2a8ff];
+    @apply font-mono text-[0.9em] px-1.5 py-0.5 rounded bg-violet-50 text-violet-700
+           dark:bg-white/[0.06] dark:text-[#d2a8ff];
 }
 
 #blog-post blockquote {
-    @apply border-l-2 border-blue-100 pl-4 py-1 my-5 text-white/75 italic;
+    @apply border-l-2 border-blue-300 pl-4 py-1 my-5 text-slate-600 italic
+           dark:border-blue-100 dark:text-white/75;
 }
 
 #blog-post table {
-    @apply w-full table-auto my-5 border-collapse rounded-lg overflow-hidden border border-white/10;
+    @apply w-full table-auto my-5 border-collapse rounded-lg overflow-hidden border border-slate-200
+           dark:border-white/10;
 }
 
 #blog-post table th {
-    @apply border-b border-white/10 bg-white/[0.04] px-3 py-2 text-left font-semibold text-white;
+    @apply border-b border-slate-200 bg-slate-50 px-3 py-2 text-left font-semibold text-slate-900
+           dark:border-white/10 dark:bg-white/[0.04] dark:text-white;
 }
 
 #blog-post table td {
-    @apply border-b border-white/10 px-3 py-2;
+    @apply border-b border-slate-200 px-3 py-2 dark:border-white/10;
 }
 
 
@@ -197,11 +212,11 @@ code {
 }
 
 #example-description hr {
-    @apply text-blue-100 my-4 border-t-2 rounded;
+    @apply text-blue-300 my-4 border-t-2 rounded dark:text-blue-100;
 }
 
 #example-description code {
-    @apply text-orange-100;
+    @apply text-orange-300 dark:text-orange-100;
 }
 
 
@@ -209,27 +224,28 @@ code {
    styles below replace the previous heavy borders/shadows with the lighter
    .card-style surface system. */
 #documentation-page {
-    @apply pb-8 text-white/85;
+    @apply pb-8 text-slate-700 dark:text-white/85;
 }
 
 #documentation-page a {
-    @apply inline text-blue-100 underline-offset-2 hover:text-orange-100 transition-colors;
+    @apply inline text-blue-300 underline-offset-2 hover:text-orange-300 transition-colors
+           dark:text-blue-100 dark:hover:text-orange-100;
 }
 
 #documentation-page h1 {
-    @apply font-bold text-3xl tracking-tight text-white mt-2 mb-5;
+    @apply font-bold text-3xl tracking-tight text-slate-900 mt-2 mb-5 dark:text-white;
 }
 
 #documentation-page h2 {
-    @apply font-bold text-2xl tracking-tight text-white mt-10 mb-3;
+    @apply font-bold text-2xl tracking-tight text-slate-900 mt-10 mb-3 dark:text-white;
 }
 
 #documentation-page h3 {
-    @apply font-semibold text-xl text-white mt-7 mb-2;
+    @apply font-semibold text-xl text-slate-900 mt-7 mb-2 dark:text-white;
 }
 
 #documentation-page h4 {
-    @apply font-semibold text-base text-white mt-5 mb-2;
+    @apply font-semibold text-base text-slate-900 mt-5 mb-2 dark:text-white;
 }
 
 #documentation-page p,
@@ -252,19 +268,21 @@ code {
 }
 
 #documentation-page hr {
-    @apply my-8 border-0 h-px bg-white/10;
+    @apply my-8 border-0 h-px bg-slate-200 dark:bg-white/10;
 }
 
 #documentation-page table {
-    @apply w-full table-auto my-5 border-collapse rounded-lg overflow-hidden border border-white/10;
+    @apply w-full table-auto my-5 border-collapse rounded-lg overflow-hidden border border-slate-200
+           dark:border-white/10;
 }
 
 #documentation-page th {
-    @apply border-b border-white/10 bg-white/[0.04] px-3 py-2 text-left font-semibold text-white;
+    @apply border-b border-slate-200 bg-slate-50 px-3 py-2 text-left font-semibold text-slate-900
+           dark:border-white/10 dark:bg-white/[0.04] dark:text-white;
 }
 
 #documentation-page td {
-    @apply border-b border-white/10 px-3 py-2;
+    @apply border-b border-slate-200 px-3 py-2 dark:border-white/10;
 }
 
 #documentation-page tr:last-child td {
@@ -272,7 +290,8 @@ code {
 }
 
 #documentation-page pre {
-    @apply rounded-xl my-6 p-4 overflow-auto border border-white/10 bg-white/[0.03];
+    @apply rounded-xl my-6 p-4 overflow-auto border border-slate-200 bg-white
+           dark:border-white/10 dark:bg-white/[0.03];
 }
 
 #documentation-page pre code {
@@ -281,11 +300,13 @@ code {
 
 /* Inline code only (not the <code> inside <pre>). */
 #documentation-page :not(pre) > code {
-    @apply font-mono text-[0.9em] px-1.5 py-0.5 rounded bg-white/[0.06] text-[#d2a8ff];
+    @apply font-mono text-[0.9em] px-1.5 py-0.5 rounded bg-violet-50 text-violet-700
+           dark:bg-white/[0.06] dark:text-[#d2a8ff];
 }
 
 #documentation-page blockquote {
-    @apply border-l-2 border-blue-100 pl-4 py-1 my-5 text-white/75 italic;
+    @apply border-l-2 border-blue-300 pl-4 py-1 my-5 text-slate-600 italic
+           dark:border-blue-100 dark:text-white/75;
 }
 
 /* Package nav rendered by [PACKAGE_NAV] marker. Inherits #documentation-page
@@ -295,14 +316,18 @@ code {
 }
 
 #documentation-page .package-nav a {
-    @apply inline-flex items-center gap-1.5 rounded-md border border-white/10 bg-white/[0.04]
-           hover:border-white/20 hover:bg-white/[0.08] px-3 py-1.5 text-sm font-medium
-           text-white/85 hover:text-white !no-underline transition-colors;
+    @apply inline-flex items-center gap-1.5 rounded-md border border-slate-200 bg-white
+           hover:border-slate-300 hover:bg-slate-50 px-3 py-1.5 text-sm font-medium
+           text-slate-700 hover:text-slate-900 !no-underline transition-colors
+           dark:border-white/10 dark:bg-white/[0.04] dark:hover:border-white/20
+           dark:hover:bg-white/[0.08] dark:text-white/85 dark:hover:text-white;
 }
 
 /* Back link rendered by [BACK:/path] marker. */
 #documentation-page a.back-link {
-    @apply inline-flex items-center gap-1.5 mb-4 text-sm text-white/65 hover:text-white !no-underline transition-colors;
+    @apply inline-flex items-center gap-1.5 mb-4 text-sm text-slate-500 hover:text-slate-900
+           !no-underline transition-colors
+           dark:text-white/65 dark:hover:text-white;
 }
 
 /* Mobile docs popover lives inside #documentation-page so it inherits prose
@@ -367,7 +392,8 @@ code {
 
 /* Foldable Table of Contents */
 .toc-wrapper {
-    @apply rounded-xl mt-4 mb-6 border border-white/10 bg-white/[0.03] overflow-hidden;
+    @apply rounded-xl mt-4 mb-6 border border-slate-200 bg-white overflow-hidden
+           dark:border-white/10 dark:bg-white/[0.03];
 }
 
 .toc-header {
@@ -453,7 +479,9 @@ code {
         }
 
         .back-link {
-            @apply inline-flex items-center gap-2 ml-4 text-sm text-white/60 hover:text-white transition-colors no-underline;
+            @apply inline-flex items-center gap-2 ml-4 text-sm text-slate-500 hover:text-slate-900
+                transition-colors no-underline
+                dark:text-white/60 dark:hover:text-white;
 
             img {
                 @apply inline-block;
@@ -462,18 +490,21 @@ code {
     }
 
     #help-section {
-        @apply mb-6 rounded-xl p-5 border border-white/10 bg-white/[0.03];
+        @apply mb-6 rounded-xl p-5 border border-slate-200 bg-white
+            dark:border-white/10 dark:bg-white/[0.03];
 
         .help-header {
-            @apply flex justify-between items-center mb-4 pb-3 border-b border-white/10;
+            @apply flex justify-between items-center mb-4 pb-3 border-b border-slate-200
+                dark:border-white/10;
 
             h2 {
                 @apply text-2xl font-bold mb-0;
             }
 
             .help-close {
-                @apply w-8 h-8 rounded-full bg-transparent hover:bg-white/[0.10] text-white text-2xl
-                    flex items-center justify-center cursor-pointer border-0 transition-colors leading-none;
+                @apply w-8 h-8 rounded-full bg-transparent hover:bg-slate-100 text-slate-700 text-2xl
+                    flex items-center justify-center cursor-pointer border-0 transition-colors leading-none
+                    dark:hover:bg-white/[0.10] dark:text-white;
             }
         }
 
@@ -482,35 +513,37 @@ code {
                 @apply mb-6 last:mb-0;
 
                 h3 {
-                    @apply text-xl font-semibold mb-3 text-orange-100;
+                    @apply text-xl font-semibold mb-3 text-orange-300 dark:text-orange-100;
                 }
 
                 p {
-                    @apply mb-3 text-white/75 leading-relaxed;
+                    @apply mb-3 text-slate-700 leading-relaxed dark:text-white/75;
 
                     a {
-                        @apply text-blue-100 hover:text-orange-100 underline;
+                        @apply text-blue-300 hover:text-orange-300 underline
+                            dark:text-blue-100 dark:hover:text-orange-100;
                     }
                 }
 
                 ul {
-                    @apply list-disc pl-6 mb-3 text-white/75;
+                    @apply list-disc pl-6 mb-3 text-slate-700 dark:text-white/75;
 
                     li {
                         @apply mb-2;
 
                         strong {
-                            @apply text-white font-semibold;
+                            @apply text-slate-900 font-semibold dark:text-white;
                         }
 
                         em {
-                            @apply text-white/55 text-sm;
+                            @apply text-slate-500 text-sm dark:text-white/55;
                         }
                     }
                 }
 
                 code {
-                    @apply bg-white/[0.06] px-1.5 py-0.5 rounded text-[#d2a8ff] font-mono text-sm;
+                    @apply bg-violet-50 px-1.5 py-0.5 rounded text-violet-700 font-mono text-sm
+                        dark:bg-white/[0.06] dark:text-[#d2a8ff];
                 }
             }
         }
@@ -521,7 +554,7 @@ code {
         display: none;
 
         div.storage-indicator {
-            @apply col-start-1 col-span-12 lg:col-span-3 gap-2 text-xs text-white/55;
+            @apply col-start-1 col-span-12 lg:col-span-3 gap-2 text-xs text-slate-500 dark:text-white/55;
         }
 
         div.actions {
@@ -534,12 +567,15 @@ code {
             button,
             a {
                 @apply inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium
-                    text-white/85 hover:text-white border border-white/10 bg-white/[0.04]
-                    hover:border-white/20 hover:bg-white/[0.08] transition-colors no-underline;
+                    text-slate-700 hover:text-slate-900 border border-slate-300 bg-white
+                    hover:border-slate-400 hover:bg-slate-50 transition-colors no-underline
+                    dark:text-white/85 dark:hover:text-white dark:border-white/10 dark:bg-white/[0.04]
+                    dark:hover:border-white/20 dark:hover:bg-white/[0.08];
             }
 
             #action-run {
-                @apply bg-orange-100 hover:bg-orange-200 border-orange-100 hover:border-orange-200 text-white;
+                @apply bg-orange-100 hover:bg-orange-200 border-orange-100 hover:border-orange-200 text-white
+                    dark:bg-orange-100 dark:hover:bg-orange-200 dark:border-orange-100 dark:hover:border-orange-200 dark:text-white;
             }
 
             button:disabled,
@@ -570,7 +606,8 @@ code {
             }
 
             .file-browser-label {
-                @apply text-xs font-semibold uppercase tracking-[0.18em] text-white/55 whitespace-nowrap;
+                @apply text-xs font-semibold uppercase tracking-[0.18em] text-slate-500 whitespace-nowrap
+                    dark:text-white/55;
 
                 .help-trigger-workspace {
                     @apply cursor-pointer border-0 bg-transparent p-0 ml-2 transition-opacity hover:opacity-70 inline-block align-middle;
@@ -578,17 +615,19 @@ code {
             }
 
             .file-select {
-                @apply bg-white/[0.06] text-white border border-white/10 rounded-md px-3 py-2 text-sm
-                    focus:outline-none focus:ring-2 focus:ring-orange-100 focus:border-transparent;
+                @apply bg-white text-slate-900 border border-slate-300 rounded-md px-3 py-2 text-sm
+                    focus:outline-none focus:ring-2 focus:ring-orange-100 focus:border-transparent
+                    dark:bg-white/[0.06] dark:text-white dark:border-white/10;
 
                 option {
-                    @apply text-base py-2 bg-black;
+                    @apply text-base py-2 bg-white dark:bg-black;
                 }
             }
         }
 
         div.file-browser {
-            @apply rounded-xl p-4 overflow-auto border border-white/10 bg-white/[0.03];
+            @apply rounded-xl p-4 overflow-auto border border-slate-200 bg-white
+                dark:border-white/10 dark:bg-white/[0.03];
             display: none;
 
             @screen lg {
@@ -596,7 +635,8 @@ code {
             }
 
             .file-browser-header {
-                @apply text-xs font-semibold mb-3 text-white/55 uppercase tracking-[0.18em];
+                @apply text-xs font-semibold mb-3 text-slate-500 uppercase tracking-[0.18em]
+                    dark:text-white/55;
 
                 .help-trigger-workspace {
                     @apply cursor-pointer border-0 bg-transparent p-0 ml-2 transition-opacity hover:opacity-70 inline-block align-middle;
@@ -608,28 +648,29 @@ code {
                     @apply list-none m-0 p-0;
 
                     .file-tree-item {
-                        @apply flex items-center gap-2 py-1 text-sm cursor-default text-white/80;
+                        @apply flex items-center gap-2 py-1 text-sm cursor-default text-slate-700 dark:text-white/80;
 
                         &.directory {
-                            @apply font-medium text-blue-100;
+                            @apply font-medium text-blue-300 dark:text-blue-100;
 
                             .icon {
-                                @apply text-blue-100;
+                                @apply text-blue-300 dark:text-blue-100;
                             }
                         }
 
                         &.file {
-                            @apply text-white/80;
+                            @apply text-slate-700 dark:text-white/80;
 
                             .icon {
-                                @apply text-white/45;
+                                @apply text-slate-400 dark:text-white/45;
                             }
 
                             &.clickable {
-                                @apply cursor-pointer hover:text-orange-100 transition-colors;
+                                @apply cursor-pointer hover:text-orange-300 transition-colors
+                                    dark:hover:text-orange-100;
 
                                 &:hover .icon {
-                                    @apply text-orange-100;
+                                    @apply text-orange-300 dark:text-orange-100;
                                 }
                             }
                         }
@@ -647,28 +688,33 @@ code {
         }
 
         div.code-container {
-            @apply rounded-xl overflow-hidden border border-white/10 bg-white/[0.03]
-                min-w-0 flex flex-col;
+            @apply rounded-xl overflow-hidden border border-slate-200 bg-white
+                min-w-0 flex flex-col
+                dark:border-white/10 dark:bg-white/[0.03];
 
             .tab-bar {
-                @apply flex items-center border-b border-white/10 bg-white/[0.04] px-2;
+                @apply flex items-center border-b border-slate-200 bg-slate-50 px-2
+                    dark:border-white/10 dark:bg-white/[0.04];
 
                 .tab {
-                    @apply flex items-center gap-2 px-4 py-2 text-sm text-white/60 border-b-2 border-transparent
-                        cursor-pointer hover:text-white transition-colors -mb-[2px];
+                    @apply flex items-center gap-2 px-4 py-2 text-sm text-slate-600 border-b-2 border-transparent
+                        cursor-pointer hover:text-slate-900 transition-colors -mb-[2px]
+                        dark:text-white/60 dark:hover:text-white;
 
                     &.active {
-                        @apply text-white border-orange-100;
+                        @apply text-slate-900 border-orange-200 dark:text-white dark:border-orange-100;
                     }
 
                     .tab-close {
-                        @apply ml-1 text-white/45 hover:text-white text-lg leading-none;
+                        @apply ml-1 text-slate-400 hover:text-slate-900 text-lg leading-none
+                            dark:text-white/45 dark:hover:text-white;
                     }
                 }
 
                 .tab-action {
-                    @apply ml-auto p-2 text-white/60 hover:text-white cursor-pointer
-                        transition-colors border-0 bg-transparent;
+                    @apply ml-auto p-2 text-slate-600 hover:text-slate-900 cursor-pointer
+                        transition-colors border-0 bg-transparent
+                        dark:text-white/60 dark:hover:text-white;
                 }
             }
 
@@ -691,10 +737,12 @@ code {
     }
 
     div.output-container {
-        @apply rounded-xl overflow-auto border border-white/10 bg-white/[0.03] min-h-[100px];
+        @apply rounded-xl overflow-auto border border-slate-200 bg-white min-h-[100px]
+            dark:border-white/10 dark:bg-white/[0.03];
 
         h2 {
-            @apply text-xs font-semibold uppercase tracking-[0.18em] text-white/55 px-4 pt-3;
+            @apply text-xs font-semibold uppercase tracking-[0.18em] text-slate-500 px-4 pt-3
+                dark:text-white/55;
         }
 
         pre {
@@ -705,7 +753,7 @@ code {
             @apply py-1 font-mono text-sm;
 
             .output-timestamp {
-                @apply text-white/45 mr-2;
+                @apply text-slate-400 mr-2 dark:text-white/45;
             }
 
             .output-prefix {
@@ -718,39 +766,39 @@ code {
         }
 
         .output-info {
-            @apply text-cyan-400;
+            @apply text-cyan-700 dark:text-cyan-400;
 
             .output-prefix {
-                @apply text-cyan-500;
+                @apply text-cyan-700 dark:text-cyan-500;
             }
         }
 
         .output-success {
-            @apply text-white;
+            @apply text-slate-900 dark:text-white;
 
             .output-prefix {
-                @apply text-green-500;
+                @apply text-green-700 dark:text-green-500;
             }
         }
 
         .output-warning {
-            @apply text-yellow-400;
+            @apply text-amber-700 dark:text-yellow-400;
 
             .output-prefix {
-                @apply text-yellow-500;
+                @apply text-amber-700 dark:text-yellow-500;
             }
         }
 
         .output-error {
-            @apply text-red-400;
+            @apply text-red-700 dark:text-red-400;
 
             .output-prefix {
-                @apply text-red-500;
+                @apply text-red-700 dark:text-red-500;
             }
         }
 
         .output-default {
-            @apply text-white/80;
+            @apply text-slate-700 dark:text-white/80;
         }
     }
 
@@ -778,11 +826,11 @@ code {
 
 :root {
     --pagefind-ui-scale: 0.9;
-    --pagefind-ui-primary: #ff5547;
-    --pagefind-ui-text: rgba(255, 255, 255, 0.92);
+    --pagefind-ui-primary: #B33D32;
+    --pagefind-ui-text: #0f172a;
     --pagefind-ui-background: transparent;
-    --pagefind-ui-border: rgba(255, 255, 255, 0.10);
-    --pagefind-ui-tag: rgba(255, 255, 255, 0.06);
+    --pagefind-ui-border: #e2e8f0;
+    --pagefind-ui-tag: #f1f5f9;
     --pagefind-ui-border-width: 1px;
     --pagefind-ui-border-radius: 0.5rem;
     --pagefind-ui-image-border-radius: 0.5rem;
@@ -790,41 +838,48 @@ code {
     --pagefind-ui-font: 'Cabin Variable', system-ui, sans-serif;
 }
 
+[data-theme="dark"] {
+    --pagefind-ui-primary: #ff5547;
+    --pagefind-ui-text: rgba(255, 255, 255, 0.92);
+    --pagefind-ui-border: rgba(255, 255, 255, 0.10);
+    --pagefind-ui-tag: rgba(255, 255, 255, 0.06);
+}
+
 #site-search .pagefind-ui__search-input {
-    background: rgba(255, 255, 255, 0.04);
-    color: rgba(255, 255, 255, 0.92);
+    background: #fff;
+    color: #0f172a;
 }
 
 #site-search .pagefind-ui__search-input::placeholder {
-    color: rgba(255, 255, 255, 0.45);
+    color: #94a3b8;
 }
 
 #site-search .pagefind-ui__result {
-    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+    border-bottom: 1px solid #e2e8f0;
 }
 
 #site-search .pagefind-ui__result-link {
-    color: #fff;
+    color: #0f172a;
 }
 
 #site-search .pagefind-ui__result-link:hover {
-    color: #ff5547;
+    color: #B33D32;
 }
 
 #site-search .pagefind-ui__result-excerpt {
-    color: rgba(255, 255, 255, 0.70);
+    color: #475569;
 }
 
 #site-search mark {
     background: transparent;
-    color: #ff5547;
+    color: #B33D32;
     font-weight: 600;
 }
 
 #site-search .pagefind-ui__filter-panel,
 #site-search .pagefind-ui__filter-name,
 #site-search .pagefind-ui__filter-value {
-    color: rgba(255, 255, 255, 0.85);
+    color: #334155;
 }
 
 #site-search .pagefind-ui__filter-name {
@@ -832,7 +887,7 @@ code {
     text-transform: uppercase;
     letter-spacing: 0.08em;
     font-size: 0.75rem;
-    color: rgba(255, 255, 255, 0.55);
+    color: #64748b;
 }
 
 #site-search .pagefind-ui__filter-value input[type="checkbox"] {
@@ -840,13 +895,13 @@ code {
 }
 
 #site-search .pagefind-ui__message {
-    color: rgba(255, 255, 255, 0.65);
+    color: #64748b;
 }
 
 #site-search .pagefind-ui__search-clear {
     background: transparent;
-    border: 1px solid rgba(255, 255, 255, 0.10);
-    color: rgba(255, 255, 255, 0.70);
+    border: 1px solid #cbd5e1;
+    color: #475569;
     font-size: 0.75rem;
     padding: 0.35rem 0.6rem;
     border-radius: 0.375rem;
@@ -854,6 +909,60 @@ code {
 }
 
 #site-search .pagefind-ui__search-clear:hover {
+    background: #f1f5f9;
+    border-color: #94a3b8;
+    color: #0f172a;
+}
+
+[data-theme="dark"] #site-search .pagefind-ui__search-input {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.92);
+}
+
+[data-theme="dark"] #site-search .pagefind-ui__search-input::placeholder {
+    color: rgba(255, 255, 255, 0.45);
+}
+
+[data-theme="dark"] #site-search .pagefind-ui__result {
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+[data-theme="dark"] #site-search .pagefind-ui__result-link {
+    color: #fff;
+}
+
+[data-theme="dark"] #site-search .pagefind-ui__result-link:hover {
+    color: #ff5547;
+}
+
+[data-theme="dark"] #site-search .pagefind-ui__result-excerpt {
+    color: rgba(255, 255, 255, 0.70);
+}
+
+[data-theme="dark"] #site-search mark {
+    color: #ff5547;
+}
+
+[data-theme="dark"] #site-search .pagefind-ui__filter-panel,
+[data-theme="dark"] #site-search .pagefind-ui__filter-name,
+[data-theme="dark"] #site-search .pagefind-ui__filter-value {
+    color: rgba(255, 255, 255, 0.85);
+}
+
+[data-theme="dark"] #site-search .pagefind-ui__filter-name {
+    color: rgba(255, 255, 255, 0.55);
+}
+
+[data-theme="dark"] #site-search .pagefind-ui__message {
+    color: rgba(255, 255, 255, 0.65);
+}
+
+[data-theme="dark"] #site-search .pagefind-ui__search-clear {
+    border: 1px solid rgba(255, 255, 255, 0.10);
+    color: rgba(255, 255, 255, 0.70);
+}
+
+[data-theme="dark"] #site-search .pagefind-ui__search-clear:hover {
     background: rgba(255, 255, 255, 0.06);
     border-color: rgba(255, 255, 255, 0.20);
     color: #fff;
diff --git a/web/landing/assets/styles/changelog.css b/web/landing/assets/styles/changelog.css
index 98286ab161..4dded1c3c4 100644
--- a/web/landing/assets/styles/changelog.css
+++ b/web/landing/assets/styles/changelog.css
@@ -1,17 +1,17 @@
 section#changelog {
-    @apply text-white/85;
+    @apply text-slate-700 dark:text-white/85;
 }
 
 section#changelog h1 {
-    @apply font-bold text-3xl tracking-tight text-white mt-2 mb-5;
+    @apply font-bold text-3xl tracking-tight text-slate-900 mt-2 mb-5 dark:text-white;
 }
 
 section#changelog h2 {
-    @apply font-bold text-2xl tracking-tight text-white mt-10 mb-3;
+    @apply font-bold text-2xl tracking-tight text-slate-900 mt-10 mb-3 dark:text-white;
 }
 
 section#changelog h3 {
-    @apply font-semibold text-xl text-white mt-7 mb-2;
+    @apply font-semibold text-xl text-slate-900 mt-7 mb-2 dark:text-white;
 }
 
 section#changelog p {
@@ -19,7 +19,8 @@ section#changelog p {
 }
 
 section#changelog a {
-    @apply text-blue-100 underline-offset-2 hover:text-orange-100 transition-colors;
+    @apply text-blue-300 underline-offset-2 hover:text-orange-300 transition-colors
+           dark:text-blue-100 dark:hover:text-orange-100;
 }
 
 section#changelog ul {
@@ -27,13 +28,14 @@ section#changelog ul {
 }
 
 section#changelog ul li strong {
-    @apply font-semibold text-white;
+    @apply font-semibold text-slate-900 dark:text-white;
 }
 
 section#changelog hr {
-    @apply my-8 border-0 h-px bg-white/10;
+    @apply my-8 border-0 h-px bg-slate-200 dark:bg-white/10;
 }
 
 section#changelog :not(pre) > code {
-    @apply font-mono text-[0.9em] px-1.5 py-0.5 rounded bg-white/[0.06] text-[#d2a8ff];
+    @apply font-mono text-[0.9em] px-1.5 py-0.5 rounded bg-violet-50 text-violet-700
+           dark:bg-white/[0.06] dark:text-[#d2a8ff];
 }
diff --git a/web/landing/tailwind.config.js b/web/landing/tailwind.config.js
index 944a906113..d7ce4e42a6 100644
--- a/web/landing/tailwind.config.js
+++ b/web/landing/tailwind.config.js
@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  darkMode: ['selector', '[data-theme="dark"]'],
   content: [
     "./assets/*.js",
     "./assets/controllers/**/*.js",
diff --git a/web/landing/templates/base.html.twig b/web/landing/templates/base.html.twig
index ecd5683dcd..a4e8f1cdf7 100644
--- a/web/landing/templates/base.html.twig
+++ b/web/landing/templates/base.html.twig
@@ -4,6 +4,22 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, minimum-scale=1.0">
 
+    <script>
+        (function () {
+            try {
+                var stored = localStorage.getItem('theme');
+                var resolved = stored === 'light' || stored === 'dark'
+                    ? stored
+                    : (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+                if (resolved === 'dark') {
+                    document.documentElement.setAttribute('data-theme', 'dark');
+                } else {
+                    document.documentElement.removeAttribute('data-theme');
+                }
+            } catch (e) {}
+        })();
+    </script>
+
     <title>{{ block('title') }}</title>
     <meta property="og:title" content="{{ block('title') }}" />
     <meta name="twitter:title" content="{{ block('title') }}" >
@@ -80,7 +96,7 @@
         <script>
             mermaid.initialize({
                 startOnLoad: false,
-                theme: 'dark',
+                theme: document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'default',
                 securityLevel: 'loose',
                 flowchart: {
                     useMaxWidth: true,
@@ -92,11 +108,36 @@
             window.flow = {
                 dsl: {{ dsl() | raw }},
             };
+
+            (function () {
+                function resolvedTheme() {
+                    return document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light';
+                }
+
+                function pushGiscusTheme(theme) {
+                    document.querySelectorAll('iframe.giscus-frame').forEach(function (iframe) {
+                        iframe.contentWindow.postMessage(
+                            { giscus: { setConfig: { theme: theme } } },
+                            'https://giscus.app'
+                        );
+                    });
+                }
+
+                window.addEventListener('message', function (event) {
+                    if (event.origin !== 'https://giscus.app') return;
+                    if (!event.data || !event.data.giscus) return;
+                    pushGiscusTheme(resolvedTheme());
+                });
+
+                document.addEventListener('theme:changed', function (event) {
+                    pushGiscusTheme((event.detail && event.detail.resolved) || resolvedTheme());
+                });
+            })();
         </script>
         {{ importmap() }}
     {% endblock %}
 </head>
-<body class="scroll-smooth bg-black text-white" data-environment="{{ app.environment }}">
+<body class="scroll-smooth bg-[#e8eef7] text-slate-900 dark:bg-black dark:text-white" data-environment="{{ app.environment }}">
     <a href="#main" class="sr-only focus:not-sr-only focus:fixed focus:top-3 focus:left-3 focus:z-[60] focus:rounded-md focus:bg-orange-100 focus:px-3 focus:py-2 focus:text-white">
         Skip to content
     </a>
diff --git a/web/landing/templates/blog/post.html.twig b/web/landing/templates/blog/post.html.twig
index 986d0066e7..608b46a367 100644
--- a/web/landing/templates/blog/post.html.twig
+++ b/web/landing/templates/blog/post.html.twig
@@ -12,11 +12,11 @@
 
 {% block main %}
     <section class="mx-auto max-w-screen-2xl px-4 sm:px-6 lg:px-8 mt-8">
-        <nav aria-label="Breadcrumb" class="text-sm text-white/55 mb-4">
+        <nav aria-label="Breadcrumb" class="text-sm text-slate-500 mb-4 dark:text-white/55">
             <ol class="inline-flex items-center gap-2">
-                <li><a class="text-white/75 hover:text-white no-underline" href="{{ path('blog') }}">Blog</a></li>
+                <li><a class="text-slate-700 hover:text-slate-900 no-underline dark:text-white/75 dark:hover:text-white" href="{{ path('blog') }}">Blog</a></li>
                 <li aria-hidden="true">/</li>
-                <li class="text-white/85">{{ post.title }}</li>
+                <li class="text-slate-800 dark:text-white/85">{{ post.title }}</li>
             </ol>
         </nav>
     </section>
@@ -24,9 +24,9 @@
     {{ block('article') }}
 
     <section class="mx-auto max-w-screen-2xl px-4 sm:px-6 lg:px-8 mt-12 mb-16">
-        <p class="text-sm text-white/55 mb-8">
+        <p class="text-sm text-slate-500 mb-8 dark:text-white/55">
             Found a typo or an outdated section?
-            <a class="inline-flex items-center gap-1 text-white/80 hover:text-white !no-underline"
+            <a class="inline-flex items-center gap-1 text-slate-700 hover:text-slate-900 !no-underline dark:text-white/80 dark:hover:text-white"
                href="https://github.com/flow-php/flow/edit/1.x/web/landing/templates/blog/posts/{{ date }}/{{ slug }}/post.html.twig"
                target="_blank" rel="noopener">
                 Edit this post on GitHub
@@ -34,7 +34,7 @@
             </a>
         </p>
 
-        <hr class="border-0 h-px bg-white/10 mb-8"/>
+        <hr class="border-0 h-px bg-slate-200 mb-8 dark:bg-white/10"/>
 
         <script src="https://giscus.app/client.js"
                 data-repo="flow-php/flow-php.com"
@@ -46,7 +46,7 @@
                 data-reactions-enabled="0"
                 data-emit-metadata="0"
                 data-input-position="bottom"
-                data-theme="dark"
+                data-theme="preferred_color_scheme"
                 data-lang="en"
                 crossorigin="anonymous"
                 async>
diff --git a/web/landing/templates/blog/posts.html.twig b/web/landing/templates/blog/posts.html.twig
index 3cc1eed069..10a8456e1f 100644
--- a/web/landing/templates/blog/posts.html.twig
+++ b/web/landing/templates/blog/posts.html.twig
@@ -27,18 +27,18 @@
             {% for post in posts %}
                 {% set postUrl = path('blog_post', {date: post.date | date('Y-m-d'), slug: post.slug}) %}
                 <article class="card card-hover flex flex-col">
-                    <time datetime="{{ post.date | date('c') }}" class="text-xs font-semibold uppercase tracking-[0.18em] text-white/55">
+                    <time datetime="{{ post.date | date('c') }}" class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500 dark:text-white/55">
                         {{ post.date | date('M j, Y') }}
                     </time>
                     <h2 class="mt-3 text-xl font-semibold tracking-tight">
-                        <a class="text-white hover:text-orange-100 no-underline" href="{{ postUrl }}">
+                        <a class="text-slate-900 hover:text-orange-300 no-underline dark:text-white dark:hover:text-orange-100" href="{{ postUrl }}">
                             {{ post.title }}
                         </a>
                     </h2>
                     <p class="mt-2 muted text-sm leading-relaxed flex-1">
                         {{ post.description }}
                     </p>
-                    <a class="mt-4 inline-flex items-center gap-1 text-sm text-blue-100 hover:text-orange-100 no-underline self-start"
+                    <a class="mt-4 inline-flex items-center gap-1 text-sm text-blue-300 hover:text-orange-300 no-underline self-start dark:text-blue-100 dark:hover:text-orange-100"
                        href="{{ postUrl }}">
                         Read more <span aria-hidden="true">→</span>
                     </a>
diff --git a/web/landing/templates/documentation/dsl.html.twig b/web/landing/templates/documentation/dsl.html.twig
index beed5a7ac9..66d8d36f70 100644
--- a/web/landing/templates/documentation/dsl.html.twig
+++ b/web/landing/templates/documentation/dsl.html.twig
@@ -21,12 +21,12 @@
 
         <aside class="hidden lg:block lg:order-1">
             <nav aria-label="DSL modules">
-                <h2 class="px-2.5 mb-3 text-xs font-semibold uppercase tracking-[0.18em] text-white/50">
+                <h2 class="px-2.5 mb-3 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500 dark:text-white/50">
                     DSL References
                 </h2>
 
                 <a href="{{ path('documentation') }}"
-                   class="inline-flex items-center gap-2 mb-3 px-2.5 py-1 text-sm text-white/70 hover:text-white no-underline">
+                   class="inline-flex items-center gap-2 mb-3 px-2.5 py-1 text-sm text-slate-600 hover:text-slate-900 no-underline dark:text-white/70 dark:hover:text-white">
                     <span aria-hidden="true">←</span> Back to docs
                 </a>
 
@@ -37,18 +37,18 @@
                             <a href="{{ path('documentation_dsl', {module: module.name | lower, _fragment: 'dsl-functions'}) }}"
                                class="block rounded-md px-2.5 py-1.5 text-sm transition-colors no-underline border-l-2
                                       {{ isActive
-                                        ? 'border-orange-100 bg-white/[0.06] text-white font-medium'
-                                        : 'border-transparent text-white/70 hover:text-white hover:bg-white/[0.04]' }}"
+                                        ? 'border-orange-100 bg-slate-100 text-slate-900 font-medium dark:bg-white/[0.06] dark:text-white'
+                                        : 'border-transparent text-slate-600 hover:text-slate-900 hover:bg-slate-100 dark:text-white/70 dark:hover:text-white dark:hover:bg-white/[0.04]' }}"
                                {% if isActive %}aria-current="page"{% endif %}>
                                 {{ module.value }}
                             </a>
                             {% if isActive %}
-                                <ul class="mt-1 ml-3 pl-3 border-l border-white/10 space-y-0.5">
+                                <ul class="mt-1 ml-3 pl-3 border-l border-slate-200 space-y-0.5 dark:border-white/10">
                                     {% for type in types %}
                                         {% if definitions.onlyType(type).count %}
                                             <li>
                                                 <a href="#type-{{ type.name|lower }}"
-                                                   class="block rounded-md px-2.5 py-1 text-xs text-white/65 hover:text-white hover:bg-white/[0.04] no-underline border-l-2 border-transparent">
+                                                   class="block rounded-md px-2.5 py-1 text-xs text-slate-500 hover:text-slate-900 hover:bg-slate-100 no-underline border-l-2 border-transparent dark:text-white/65 dark:hover:text-white dark:hover:bg-white/[0.04]">
                                                     {{ type.value }}
                                                 </a>
                                             </li>
@@ -73,7 +73,7 @@
             <p class="muted mb-8 max-w-3xl">
                 DSL stands for Domain Specific Language. In Flow, the DSL is a set of small
                 functions that wrap object construction so pipelines read top-to-bottom.
-                See the <a class="text-blue-100 hover:text-orange-100" href="{{ path('example', {topic: 'data_frame', example: 'data_frame', _fragment: 'example'}) }}">examples</a>
+                See the <a class="text-blue-300 hover:text-orange-300 dark:text-blue-100 dark:hover:text-orange-100" href="{{ path('example', {topic: 'data_frame', example: 'data_frame', _fragment: 'example'}) }}">examples</a>
                 for usage in context.
             </p>
 
@@ -83,7 +83,7 @@
                         <h2 id="type-{{ type.name|lower }}"
                             class="font-bold text-2xl tracking-tight mb-4 scroll-mt-24"
                             data-dsl-type="{{ type.value }}">
-                            <a href="#type-{{ type.name|lower }}" class="text-white no-underline hover:text-orange-100">
+                            <a href="#type-{{ type.name|lower }}" class="text-slate-900 no-underline hover:text-orange-300 dark:text-white dark:hover:text-orange-100">
                                 {{ type.name }}
                             </a>
                         </h2>
@@ -91,18 +91,18 @@
                         <div class="space-y-4">
                             {% for definition in definitions.onlyType(type).all %}
                                 <article data-dsl-function class="card !p-0 overflow-hidden">
-                                    <div class="flex items-center justify-between gap-3 px-5 py-3 border-b border-white/10 bg-white/[0.02]">
+                                    <div class="flex items-center justify-between gap-3 px-5 py-3 border-b border-slate-200 bg-slate-50 dark:border-white/10 dark:bg-white/[0.02]">
                                         <h3 class="m-0 font-mono text-sm font-medium" id="dsl-{{ definition.name }}">
                                             <a href="{{ path('documentation_dsl_function', {module: definition.module.name | lower, function: definition.name | slugify | lower, _fragment: 'dsl-function'}) }}"
-                                               class="inline-flex items-center gap-2 text-white no-underline hover:text-orange-100">
-                                                <img src="{{ asset('images/icons/link.svg') }}" alt="" width="14" height="14" class="opacity-60">
+                                               class="inline-flex items-center gap-2 text-slate-900 no-underline hover:text-orange-300 dark:text-white dark:hover:text-orange-100">
+                                                <img src="{{ asset('images/icons/link.svg') }}" alt="" width="14" height="14" class="opacity-60 dark:invert-0 invert">
                                                 {{ definition.name }}
                                             </a>
                                         </h3>
-                                        <a class="inline-flex items-center gap-1.5 rounded-md border border-white/10 bg-white/[0.04] hover:border-white/20 hover:bg-white/[0.08] px-2.5 py-1 text-xs text-white/85 no-underline transition-colors"
+                                        <a class="inline-flex items-center gap-1.5 rounded-md border border-slate-300 bg-white hover:border-slate-400 hover:bg-slate-50 px-2.5 py-1 text-xs text-slate-700 no-underline transition-colors dark:border-white/10 dark:bg-white/[0.04] dark:hover:border-white/20 dark:hover:bg-white/[0.08] dark:text-white/85"
                                            href="{{ definition.githubUrl }}" target="_blank" rel="noopener" data-dsl-source-link>
                                             View
-                                            <img src="{{ asset('images/icons/github.svg') }}" alt="" width="12" height="12" class="opacity-70">
+                                            <img src="{{ asset('images/icons/github.svg') }}" alt="" width="12" height="12" class="opacity-70 dark:invert-0 invert">
                                         </a>
                                     </div>
                                     {% apply spaceless %}
diff --git a/web/landing/templates/documentation/dsl/function.html.twig b/web/landing/templates/documentation/dsl/function.html.twig
index bc8747c073..470c0383e7 100644
--- a/web/landing/templates/documentation/dsl/function.html.twig
+++ b/web/landing/templates/documentation/dsl/function.html.twig
@@ -20,12 +20,12 @@
 
         <aside class="hidden lg:block lg:order-1">
             <nav aria-label="DSL modules">
-                <h2 class="px-2.5 mb-3 text-xs font-semibold uppercase tracking-[0.18em] text-white/50">
+                <h2 class="px-2.5 mb-3 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500 dark:text-white/50">
                     DSL References
                 </h2>
 
                 <a href="{{ path('documentation_dsl', {module: module_name | lower, _fragment: 'dsl-functions'}) }}"
-                   class="inline-flex items-center gap-2 mb-3 px-2.5 py-1 text-sm text-white/70 hover:text-white no-underline">
+                   class="inline-flex items-center gap-2 mb-3 px-2.5 py-1 text-sm text-slate-600 hover:text-slate-900 no-underline dark:text-white/70 dark:hover:text-white">
                     <span aria-hidden="true">←</span> Back to {{ module_name|humanize }}
                 </a>
 
@@ -36,8 +36,8 @@
                             <a href="{{ path('documentation_dsl', {module: module.name | lower, _fragment: 'dsl-functions'}) }}"
                                class="block rounded-md px-2.5 py-1.5 text-sm transition-colors no-underline border-l-2
                                       {{ isActive
-                                        ? 'border-orange-100 bg-white/[0.06] text-white font-medium'
-                                        : 'border-transparent text-white/70 hover:text-white hover:bg-white/[0.04]' }}">
+                                        ? 'border-orange-100 bg-slate-100 text-slate-900 font-medium dark:bg-white/[0.06] dark:text-white'
+                                        : 'border-transparent text-slate-600 hover:text-slate-900 hover:bg-slate-100 dark:text-white/70 dark:hover:text-white dark:hover:bg-white/[0.04]' }}">
                                 {{ module.value }}
                             </a>
                         </li>
@@ -62,10 +62,10 @@
             </h1>
 
             <div class="flex gap-2 mb-6" data-pagefind-ignore>
-                <a class="inline-flex items-center gap-2 rounded-lg border border-white/10 bg-white/[0.04] hover:border-white/20 hover:bg-white/[0.08] px-3 py-1.5 text-sm font-medium text-white/85 transition-colors no-underline"
+                <a class="inline-flex items-center gap-2 rounded-lg border border-slate-300 bg-white hover:border-slate-400 hover:bg-slate-50 px-3 py-1.5 text-sm font-medium text-slate-700 transition-colors no-underline dark:border-white/10 dark:bg-white/[0.04] dark:hover:border-white/20 dark:hover:bg-white/[0.08] dark:text-white/85"
                    href="{{ definition.githubUrl }}" target="_blank" rel="noopener" data-dsl-source-link>
                     View on GitHub
-                    <img src="{{ asset('images/icons/github.svg') }}" alt="" width="14" height="14" class="opacity-70">
+                    <img src="{{ asset('images/icons/github.svg') }}" alt="" width="14" height="14" class="opacity-70 dark:invert-0 invert">
                 </a>
             </div>
 
@@ -81,19 +81,19 @@
             <div class="space-y-5">
                 {% for example in examples %}
                     <article class="card !p-0 overflow-hidden">
-                        <div class="flex items-center justify-between gap-3 px-5 py-3 border-b border-white/10 bg-white/[0.02]">
+                        <div class="flex items-center justify-between gap-3 px-5 py-3 border-b border-slate-200 bg-slate-50 dark:border-white/10 dark:bg-white/[0.02]">
                             <h3 class="m-0 text-sm font-medium">
-                                <a class="text-white hover:text-orange-100 no-underline"
+                                <a class="text-slate-900 hover:text-orange-300 no-underline dark:text-white dark:hover:text-orange-100"
                                    href="{{ path('example', { topic: example.topic, example: example.name, '_fragment': 'example' }) }}">
                                     {{ example.topic|humanize }} · {{ example.name|humanize }}
                                 </a>
                             </h3>
-                            <button class="inline-flex items-center justify-center h-8 w-8 rounded-md border border-white/10 bg-black/40 hover:bg-black/70 text-white [&.copied]:before:content-['Copied!'] before:absolute before:-translate-x-20"
+                            <button class="inline-flex items-center justify-center h-8 w-8 rounded-md border border-slate-300 bg-white hover:bg-slate-50 text-slate-700 [&.copied]:before:content-['Copied!'] before:absolute before:-translate-x-20 dark:border-white/10 dark:bg-black/40 dark:hover:bg-black/70 dark:text-white"
                                     title="copy code"
                                     aria-label="Copy code"
                                     data-clipboard-target="#example-code-{{ loop.index }}"
                                     {{ stimulus_controller('clipboard') }}>
-                                <img src="{{ asset('images/icons/copy.svg') }}" alt="" width="14" height="14">
+                                <img src="{{ asset('images/icons/copy.svg') }}" alt="" width="14" height="14" class="dark:invert-0 invert">
                             </button>
                         </div>
                         {% apply spaceless %}
@@ -104,7 +104,7 @@
             </div>
             {% endif %}
 
-            <hr class="border-0 h-px bg-white/10 my-8"/>
+            <hr class="border-0 h-px bg-slate-200 my-8 dark:bg-white/10"/>
 
             <script src="https://giscus.app/client.js"
                     data-repo="flow-php/flow-php.com"
@@ -116,7 +116,7 @@
                     data-reactions-enabled="0"
                     data-emit-metadata="0"
                     data-input-position="bottom"
-                    data-theme="dark"
+                    data-theme="preferred_color_scheme"
                     data-lang="en"
                     crossorigin="anonymous"
                     async>
diff --git a/web/landing/templates/documentation/example.html.twig b/web/landing/templates/documentation/example.html.twig
index d272d048fa..5e82fa080e 100644
--- a/web/landing/templates/documentation/example.html.twig
+++ b/web/landing/templates/documentation/example.html.twig
@@ -37,13 +37,13 @@
                 <h1 class="!mt-3 !mb-4">{{ currentExample|humanize }}</h1>
 
                 <div class="flex flex-wrap gap-2 mb-6" data-pagefind-ignore>
-                    <a class="inline-flex items-center gap-2 rounded-lg border border-white/10 bg-white/[0.04] hover:border-white/20 hover:bg-white/[0.08] px-3 py-1.5 text-sm font-medium text-white/85 transition-colors no-underline"
+                    <a class="inline-flex items-center gap-2 rounded-lg border border-slate-300 bg-white hover:border-slate-400 hover:bg-slate-50 px-3 py-1.5 text-sm font-medium text-slate-700 transition-colors no-underline dark:border-white/10 dark:bg-white/[0.04] dark:hover:border-white/20 dark:hover:bg-white/[0.08] dark:text-white/85"
                        href="https://github.com/flow-php/flow/tree/1.x/examples/topics/{{ currentTopic }}/{{ currentExample }}"
                        target="_blank" rel="noopener">
                         View on GitHub
-                        <img src="{{ asset('images/icons/github.svg') }}" alt="" width="14" height="14" class="opacity-70">
+                        <img src="{{ asset('images/icons/github.svg') }}" alt="" width="14" height="14" class="opacity-70 dark:invert-0 invert">
                     </a>
-                    <a class="inline-flex items-center gap-2 rounded-lg border border-white/10 bg-white/[0.04] hover:border-white/20 hover:bg-white/[0.08] px-3 py-1.5 text-sm font-medium text-white/85 transition-colors no-underline"
+                    <a class="inline-flex items-center gap-2 rounded-lg border border-slate-300 bg-white hover:border-slate-400 hover:bg-slate-50 px-3 py-1.5 text-sm font-medium text-slate-700 transition-colors no-underline dark:border-white/10 dark:bg-white/[0.04] dark:hover:border-white/20 dark:hover:bg-white/[0.08] dark:text-white/85"
                        href="https://raw.githubusercontent.com/flow-php/flow/refs/heads/1.x/examples/topics/{{ currentTopic }}/{{ currentExample }}/flow_php_example.zip"
                        target="_blank" rel="noopener">
                         Download zip
@@ -68,11 +68,11 @@
                 {% apply spaceless %}
                 <h2 id="code-heading">Code</h2>
                 <div id="code" class="relative">
-                    <button class="absolute top-3 right-3 inline-flex items-center justify-center h-9 w-9 rounded-md border border-white/10 bg-black/60 hover:bg-black/80 text-white [&.copied]:before:content-['Copied!'] before:absolute before:-translate-x-20"
+                    <button class="absolute top-3 right-3 inline-flex items-center justify-center h-9 w-9 rounded-md border border-slate-300 bg-white hover:bg-slate-50 text-slate-700 [&.copied]:before:content-['Copied!'] before:absolute before:-translate-x-20 dark:border-white/10 dark:bg-black/60 dark:hover:bg-black/80 dark:text-white"
                             data-clipboard-target="#code-php"
                             aria-label="Copy code"
                             {{ stimulus_controller('clipboard') }}>
-                        <img src="{{ asset('images/icons/copy.svg') }}" alt="" width="16" height="16">
+                        <img src="{{ asset('images/icons/copy.svg') }}" alt="" width="16" height="16" class="dark:invert-0 invert">
                     </button>
                     <pre class="card !p-4 overflow-auto language-php" data-controller="syntax-highlight"><code id="code-php">{{- code | escape('html') -}}</code></pre>
                 </div>
@@ -90,7 +90,7 @@
                         data-reactions-enabled="0"
                         data-emit-metadata="0"
                         data-input-position="bottom"
-                        data-theme="dark"
+                        data-theme="preferred_color_scheme"
                         data-lang="en"
                         crossorigin="anonymous"
                         async>
diff --git a/web/landing/templates/documentation/navigation_left.html.twig b/web/landing/templates/documentation/navigation_left.html.twig
index c330289309..1363ae25e1 100644
--- a/web/landing/templates/documentation/navigation_left.html.twig
+++ b/web/landing/templates/documentation/navigation_left.html.twig
@@ -6,8 +6,8 @@
        {% if external %}target="_blank" rel="noopener"{% endif %}
        class="block rounded-md px-2.5 py-1.5 text-sm transition-colors no-underline border-l-2
               {{ isActive
-       ? 'border-orange-100 bg-white/[0.06] text-white font-medium'
-       : 'border-transparent text-white/70 hover:text-white hover:bg-white/[0.04]' }}"
+       ? 'border-orange-100 bg-slate-100 text-slate-900 font-medium dark:bg-white/[0.06] dark:text-white'
+       : 'border-transparent text-slate-600 hover:text-slate-900 hover:bg-slate-100 dark:text-white/70 dark:hover:text-white dark:hover:bg-white/[0.04]' }}"
             {% if isActive %}aria-current="page"{% endif %}>
         {{ label }}{% if external %} <span class="opacity-50">↗</span>{% endif %}
     </a>
@@ -17,7 +17,7 @@
 
 <nav aria-label="Documentation" class="space-y-7">
     <div>
-        <h2 class="px-2.5 mb-3 text-xs font-semibold uppercase tracking-[0.18em] text-white/50">
+        <h2 class="px-2.5 mb-3 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500 dark:text-white/50">
             Introduction
         </h2>
         <ul class="space-y-0.5">
@@ -36,13 +36,13 @@
     </div>
 
     <div>
-        <h2 class="px-2.5 mb-3 text-xs font-semibold uppercase tracking-[0.18em] text-white/50">
+        <h2 class="px-2.5 mb-3 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500 dark:text-white/50">
             Data Frame
         </h2>
         <ul class="space-y-0.5">
             <li>{{ nav.nav_link('/documentation/components/core/core', 'Data Frame', currentPath) }}</li>
         </ul>
-        <ul class="mt-1 ml-3 pl-3 border-l border-white/10 space-y-0.5">
+        <ul class="mt-1 ml-3 pl-3 border-l border-slate-200 space-y-0.5 dark:border-white/10">
             <li>{{ nav.nav_link('/documentation/components/core/building-blocks', 'Building Blocks', currentPath) }}</li>
             <li>{{ nav.nav_link('/documentation/components/core/data-retrieval', 'Data Retrieval', currentPath) }}</li>
             <li>{{ nav.nav_link('/documentation/components/core/data-manipulation', 'Data Manipulation', currentPath) }}</li>
diff --git a/web/landing/templates/documentation/navigation_right.html.twig b/web/landing/templates/documentation/navigation_right.html.twig
index 007ec42f94..69209d274c 100644
--- a/web/landing/templates/documentation/navigation_right.html.twig
+++ b/web/landing/templates/documentation/navigation_right.html.twig
@@ -5,8 +5,8 @@
     <a href="{{ href }}"
        class="block rounded-md px-2.5 py-1.5 text-sm transition-colors no-underline border-l-2
               {{ isActive
-                ? 'border-orange-100 bg-white/[0.06] text-white font-medium'
-                : 'border-transparent text-white/70 hover:text-white hover:bg-white/[0.04]' }}"
+                ? 'border-orange-100 bg-slate-100 text-slate-900 font-medium dark:bg-white/[0.06] dark:text-white'
+                : 'border-transparent text-slate-600 hover:text-slate-900 hover:bg-slate-100 dark:text-white/70 dark:hover:text-white dark:hover:bg-white/[0.04]' }}"
        {% if isActive %}aria-current="page"{% endif %}>
         {{ label }}
     </a>
@@ -16,7 +16,7 @@
 
 <nav aria-label="Components" class="space-y-7">
     <div>
-        <h2 class="px-2.5 mb-3 text-xs font-semibold uppercase tracking-[0.18em] text-white/50">Adapters</h2>
+        <h2 class="px-2.5 mb-3 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500 dark:text-white/50">Adapters</h2>
         <ul class="space-y-0.5">
             <li>{{ nav.nav_link('/documentation/components/adapters/chartjs',       'ChartJS',       currentPath) }}</li>
             <li>{{ nav.nav_link('/documentation/components/adapters/csv',           'CSV',           currentPath) }}</li>
@@ -35,7 +35,7 @@
     </div>
 
     <div>
-        <h2 class="px-2.5 mb-3 text-xs font-semibold uppercase tracking-[0.18em] text-white/50">Libraries</h2>
+        <h2 class="px-2.5 mb-3 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500 dark:text-white/50">Libraries</h2>
         <ul class="space-y-0.5">
             <li>{{ nav.nav_link('/documentation/components/libs/filesystem',         'Filesystem',         currentPath) }}</li>
             <li>{{ nav.nav_link('/documentation/components/libs/types',              'Types',              currentPath) }}</li>
@@ -51,7 +51,7 @@
     </div>
 
     <div>
-        <h2 class="px-2.5 mb-3 text-xs font-semibold uppercase tracking-[0.18em] text-white/50">PHP Extensions</h2>
+        <h2 class="px-2.5 mb-3 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500 dark:text-white/50">PHP Extensions</h2>
         <ul class="space-y-0.5">
             <li>{{ nav.nav_link('/documentation/components/extensions/pg-query-ext', 'PostgreSql Query', currentPath) }}</li>
             <li>{{ nav.nav_link('/documentation/components/extensions/arrow-ext',    'Arrow',            currentPath) }}</li>
@@ -59,7 +59,7 @@
     </div>
 
     <div>
-        <h2 class="px-2.5 mb-3 text-xs font-semibold uppercase tracking-[0.18em] text-white/50">Symfony</h2>
+        <h2 class="px-2.5 mb-3 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500 dark:text-white/50">Symfony</h2>
         <ul class="space-y-0.5">
             <li>{{ nav.nav_link('/documentation/components/bridges/symfony-postgresql-bundle',            'PostgreSQL Bundle',             currentPath) }}</li>
             <li>{{ nav.nav_link('/documentation/components/bridges/symfony-filesystem-bundle',            'Filesystem Bundle',             currentPath) }}</li>
@@ -74,7 +74,7 @@
     </div>
 
     <div>
-        <h2 class="px-2.5 mb-3 text-xs font-semibold uppercase tracking-[0.18em] text-white/50">Bridges</h2>
+        <h2 class="px-2.5 mb-3 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500 dark:text-white/50">Bridges</h2>
         <ul class="space-y-0.5">
             <li>{{ nav.nav_link('/documentation/components/bridges/filesystem-azure-bridge',     'Filesystem Azure',      currentPath) }}</li>
             <li>{{ nav.nav_link('/documentation/components/bridges/filesystem-async-aws-bridge', 'Filesystem S3',         currentPath) }}</li>
diff --git a/web/landing/templates/documentation/page.html.twig b/web/landing/templates/documentation/page.html.twig
index 8723006b3b..34c5a705c2 100644
--- a/web/landing/templates/documentation/page.html.twig
+++ b/web/landing/templates/documentation/page.html.twig
@@ -30,9 +30,9 @@
 
             {{ page.content|markdown_to_html }}
 
-            <p class="!mt-12 !mb-8 text-sm text-white/55" data-pagefind-ignore>
+            <p class="!mt-12 !mb-8 text-sm text-slate-500 dark:text-white/55" data-pagefind-ignore>
                 Found a typo or an outdated section?
-                <a class="inline-flex items-center gap-1 text-white/80 hover:text-white !no-underline"
+                <a class="inline-flex items-center gap-1 text-slate-700 hover:text-slate-900 !no-underline dark:text-white/80 dark:hover:text-white"
                    href="{{ page.editOnGitHubUrl }}" target="_blank" rel="noopener">
                     Edit this page on GitHub
                     <span aria-hidden="true">↗</span>
@@ -51,7 +51,7 @@
                     data-reactions-enabled="0"
                     data-emit-metadata="0"
                     data-input-position="bottom"
-                    data-theme="dark"
+                    data-theme="preferred_color_scheme"
                     data-lang="en"
                     crossorigin="anonymous"
                     async>
diff --git a/web/landing/templates/example/index.html.twig b/web/landing/templates/example/index.html.twig
index 42c1512c0d..f442c7970d 100644
--- a/web/landing/templates/example/index.html.twig
+++ b/web/landing/templates/example/index.html.twig
@@ -21,16 +21,16 @@
         {% include 'partials/topic_nav.html.twig' with {topicsNavigation: topicsNavigation, currentTopic: currentTopic} %}
 
         <div class="-mt-20 pt-20">
-            <nav aria-label="Example" class="mt-3 rounded-xl border border-white/10 bg-white/[0.03] p-1.5">
+            <nav aria-label="Example" class="mt-3 rounded-xl border border-slate-200 bg-white p-1.5 dark:border-white/10 dark:bg-white/[0.03]">
                 <ul class="flex whitespace-nowrap overflow-x-auto gap-1 scrollbar-hide">
                     {% for example, route in examplesNavigation %}
                         {% set isActive = (currentExample == example) or (currentExample is null and loop.first) %}
                         <li>
                             <a href="{{ path(route.name, route.arguments) }}#example"
                                class="inline-flex items-center gap-2 rounded-lg px-3 py-1.5 text-sm font-medium no-underline transition-colors
-                                      {{ isActive ? 'bg-orange-100 text-white hover:bg-orange-200' : 'text-white/75 hover:text-white hover:bg-white/[0.06]' }}"
+                                      {{ isActive ? 'bg-orange-100 text-white hover:bg-orange-200' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100 dark:text-white/75 dark:hover:text-white dark:hover:bg-white/[0.06]' }}"
                                {% if isActive %}aria-current="page"{% endif %}>
-                                <img src="{{ asset('images/icons/flow.svg') }}" alt="" width="14" height="14" class="opacity-80">
+                                <img src="{{ asset('images/icons/flow.svg') }}" alt="" width="14" height="14" class="opacity-80 {{ isActive ? '' : 'dark:invert-0 invert' }}">
                                 {{ example|humanize }}
                             </a>
                         </li>
@@ -41,7 +41,7 @@
             {% if optionsNavigation|length > 0 %}
             <nav aria-label="Option" class="mt-3 relative"
                  data-controller="horizontal-scroll">
-                <div class="rounded-xl border border-white/10 bg-white/[0.03] p-1.5">
+                <div class="rounded-xl border border-slate-200 bg-white p-1.5 dark:border-white/10 dark:bg-white/[0.03]">
                     <ul class="flex whitespace-nowrap overflow-auto gap-1 scroll-smooth"
                         data-horizontal-scroll-target="container">
                         {% for option, route in optionsNavigation %}
@@ -49,7 +49,7 @@
                             <li>
                                 <a href="{{ path(route.name, route.arguments) }}#example"
                                    class="inline-block text-sm px-3 py-1.5 rounded-lg no-underline transition-colors
-                                          {{ isActive ? 'bg-orange-100 text-white font-medium hover:bg-orange-200' : 'text-white/75 hover:text-white hover:bg-white/[0.06]' }}"
+                                          {{ isActive ? 'bg-orange-100 text-white font-medium hover:bg-orange-200' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100 dark:text-white/75 dark:hover:text-white dark:hover:bg-white/[0.06]' }}"
                                    {% if isActive %}aria-current="page"{% endif %}>
                                     {{ option|humanize }}
                                 </a>
@@ -59,18 +59,18 @@
                 </div>
 
                 <button type="button"
-                        class="absolute left-1 top-1/2 -translate-y-1/2 z-10 h-8 w-8 inline-flex items-center justify-center bg-black/80 hover:bg-black border border-white/10 rounded-full transition-opacity duration-200 opacity-0 pointer-events-none"
+                        class="absolute left-1 top-1/2 -translate-y-1/2 z-10 h-8 w-8 inline-flex items-center justify-center bg-white hover:bg-slate-50 border border-slate-300 rounded-full transition-opacity duration-200 opacity-0 pointer-events-none dark:bg-black/80 dark:hover:bg-black dark:border-white/10"
                         aria-label="Scroll left"
                         data-horizontal-scroll-target="leftArrow"
                         data-action="click->horizontal-scroll#scrollLeft">
-                    <img src="{{ asset('images/icons/arrow-left.svg') }}" alt="" width="14" height="14">
+                    <img src="{{ asset('images/icons/arrow-left.svg') }}" alt="" width="14" height="14" class="dark:invert-0 invert">
                 </button>
                 <button type="button"
-                        class="absolute right-1 top-1/2 -translate-y-1/2 z-10 h-8 w-8 inline-flex items-center justify-center bg-black/80 hover:bg-black border border-white/10 rounded-full transition-opacity duration-200 opacity-0 pointer-events-none"
+                        class="absolute right-1 top-1/2 -translate-y-1/2 z-10 h-8 w-8 inline-flex items-center justify-center bg-white hover:bg-slate-50 border border-slate-300 rounded-full transition-opacity duration-200 opacity-0 pointer-events-none dark:bg-black/80 dark:hover:bg-black dark:border-white/10"
                         aria-label="Scroll right"
                         data-horizontal-scroll-target="rightArrow"
                         data-action="click->horizontal-scroll#scrollRight">
-                    <img src="{{ asset('images/icons/arrow-right.svg') }}" alt="" width="14" height="14">
+                    <img src="{{ asset('images/icons/arrow-right.svg') }}" alt="" width="14" height="14" class="dark:invert-0 invert">
                 </button>
             </nav>
             {% endif %}
@@ -103,11 +103,11 @@
                            aria-label="Try in Playground">
                             <img src="{{ asset('images/icons/play.svg') }}" alt="" width="18" height="18">
                         </a>
-                        <button class="inline-flex items-center justify-center h-9 w-9 rounded-md bg-white/[0.06] hover:bg-white/[0.12] border border-white/10 text-white [&.copied]:before:content-['Copied!'] before:absolute before:-translate-x-20"
+                        <button class="inline-flex items-center justify-center h-9 w-9 rounded-md bg-white hover:bg-slate-50 border border-slate-300 text-slate-700 [&.copied]:before:content-['Copied!'] before:absolute before:-translate-x-20 dark:bg-white/[0.06] dark:hover:bg-white/[0.12] dark:border-white/10 dark:text-white"
                                 data-clipboard-target="#code-php"
                                 aria-label="Copy code"
                                 {{ stimulus_controller('clipboard') }}>
-                            <img src="{{ asset('images/icons/copy.svg') }}" alt="" width="18" height="18">
+                            <img src="{{ asset('images/icons/copy.svg') }}" alt="" width="18" height="18" class="dark:invert-0 invert">
                         </button>
                     </div>
                     <pre class="card !p-4 overflow-auto language-php" data-controller="syntax-highlight">
@@ -130,7 +130,7 @@
                         data-reactions-enabled="0"
                         data-emit-metadata="0"
                         data-input-position="bottom"
-                        data-theme="dark"
+                        data-theme="preferred_color_scheme"
                         data-lang="en"
                         crossorigin="anonymous"
                         async>
diff --git a/web/landing/templates/main/_contributors.html.twig b/web/landing/templates/main/_contributors.html.twig
index b5868bb391..f738e826d4 100644
--- a/web/landing/templates/main/_contributors.html.twig
+++ b/web/landing/templates/main/_contributors.html.twig
@@ -7,9 +7,9 @@
             </span>
             <h2 class="mt-3 section-title">Built in the open.</h2>
             <a href="https://github.com/flow-php/flow/graphs/contributors" target="_blank" rel="noopener"
-               class="inline-flex items-center gap-1 mt-2 text-sm text-white/75 hover:text-white no-underline">
+               class="inline-flex items-center gap-1 mt-2 text-sm text-slate-600 hover:text-slate-900 no-underline dark:text-white/75 dark:hover:text-white">
                 Join us on GitHub
-                <img src="{{ asset('images/icons/external.svg') }}" alt="" width="14" height="14">
+                <img src="{{ asset('images/icons/external.svg') }}" alt="" width="14" height="14" class="dark:invert-0 invert">
             </a>
         </div>
     </div>
@@ -17,7 +17,7 @@
     <div class="grid gap-2 sm:gap-3 grid-cols-8 sm:grid-cols-10 lg:grid-cols-12">
         {% for contributor in contributors %}
             <a href="{{ contributor.html_url }}" rel="nofollow noopener" target="_blank"
-               class="block rounded-full ring-1 ring-white/10 hover:ring-white/40 transition-shadow">
+               class="block rounded-full ring-1 ring-slate-200 hover:ring-slate-400 transition-shadow dark:ring-white/10 dark:hover:ring-white/40">
                 <img loading="lazy" src="{{ contributor.avatar_url }}" alt="{{ contributor.login }}" width="56" height="56" title="{{ contributor.login }}" class="rounded-full w-full h-auto">
             </a>
         {% endfor %}
diff --git a/web/landing/templates/main/_hero.html.twig b/web/landing/templates/main/_hero.html.twig
index 15f1f7267e..8c75c28ea7 100644
--- a/web/landing/templates/main/_hero.html.twig
+++ b/web/landing/templates/main/_hero.html.twig
@@ -1,11 +1,11 @@
 <section class="relative overflow-hidden">
-    <div class="pointer-events-none absolute inset-x-0 -top-16 h-72 bg-gradient-to-b from-blue-100/15 via-transparent to-transparent"></div>
+    <div class="pointer-events-none absolute inset-x-0 -top-16 h-72 bg-gradient-to-b from-blue-300/10 via-transparent to-transparent dark:from-blue-100/15"></div>
 
     <div class="mx-auto max-w-screen-2xl px-4 sm:px-6 lg:px-8 pt-12 pb-10 lg:pt-20 lg:pb-14">
         <div class="grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-12 items-center">
             <div class="max-lg:text-center w-full max-w-2xl min-w-0">
                 <span class="eyebrow">
-                    <span class="h-1.5 w-1.5 rounded-full bg-blue-100"></span>
+                    <span class="h-1.5 w-1.5 rounded-full bg-blue-300 dark:bg-blue-100"></span>
                     PHP {{ '8.3 · 8.4 · 8.5' }}
                 </span>
 
@@ -13,7 +13,7 @@
                     Unified data processing for&nbsp;PHP.
                 </h1>
 
-                <p class="mt-6 max-w-xl max-lg:mx-auto text-lg text-white/75 leading-relaxed">
+                <p class="mt-6 max-w-xl max-lg:mx-auto text-lg text-slate-700 leading-relaxed dark:text-white/75">
                     Strongly typed. Memory efficient. One DataFrame API for CSV, JSON, XML, Parquet,
                     Avro, REST, RDBMS, Elasticsearch, and more.
                 </p>
@@ -30,63 +30,63 @@
                 </div>
 
                 <div class="mt-8 max-lg:mx-auto max-w-md">
-                    <div class="group flex items-center gap-2 rounded-lg border border-white/10 bg-white/[0.04] px-4 py-3 font-mono text-sm">
-                        <span class="text-white/40 select-none">$</span>
-                        <span id="command" class="flex-1 min-w-0 truncate text-white/90">composer require flow-php/etl ~{{ flow_version }}</span>
+                    <div class="group flex items-center gap-2 rounded-lg border border-slate-200 bg-white px-4 py-3 font-mono text-sm dark:border-white/10 dark:bg-white/[0.04]">
+                        <span class="text-slate-400 select-none dark:text-white/40">$</span>
+                        <span id="command" class="flex-1 min-w-0 truncate text-slate-800 dark:text-white/90">composer require flow-php/etl ~{{ flow_version }}</span>
                         <button type="button"
-                                class="ml-2 [&.copied]:after:content-['Copied!'] after:absolute after:translate-x-2 select-none text-white/60 hover:text-white"
+                                class="ml-2 [&.copied]:after:content-['Copied!'] after:absolute after:translate-x-2 select-none text-slate-500 hover:text-slate-900 dark:text-white/60 dark:hover:text-white"
                                 title="copy command"
                                 aria-label="Copy install command"
                                 data-clipboard-target="#command"
                                 {{ stimulus_controller('clipboard') }}>
-                            <img src="{{ asset('images/icons/copy.svg') }}" alt="" width="16" height="16" class="inline">
+                            <img src="{{ asset('images/icons/copy.svg') }}" alt="" width="16" height="16" class="inline dark:invert-0 invert">
                         </button>
                     </div>
                 </div>
 
-                <p class="mt-5 text-sm text-white/55 max-lg:text-center">
-                    <a class="text-white/80 hover:text-white no-underline" href="{{ url('changelog') }}">Changelog</a>
-                    <span class="mx-2 text-white/30">•</span>
-                    <a class="text-white/80 hover:text-white no-underline" href="{{ url('blog_post', {'date': '2025-03-16', 'slug': 'flow-php-release-cycle'}) }}">Release cycle</a>
+                <p class="mt-5 text-sm text-slate-500 max-lg:text-center dark:text-white/55">
+                    <a class="text-slate-700 hover:text-slate-900 no-underline dark:text-white/80 dark:hover:text-white" href="{{ url('changelog') }}">Changelog</a>
+                    <span class="mx-2 text-slate-300 dark:text-white/30">•</span>
+                    <a class="text-slate-700 hover:text-slate-900 no-underline dark:text-white/80 dark:hover:text-white" href="{{ url('blog_post', {'date': '2025-03-16', 'slug': 'flow-php-release-cycle'}) }}">Release cycle</a>
                 </p>
             </div>
 
             <div class="relative max-lg:hidden" aria-hidden="true">
-                <div class="absolute inset-0 -z-10 rounded-full bg-blue-100/15 blur-3xl"></div>
+                <div class="absolute inset-0 -z-10 rounded-full bg-blue-300/10 blur-3xl dark:bg-blue-100/15"></div>
                 <img src="{{ asset('images/elephant.svg') }}" alt="" width="720" height="720" class="w-full h-auto max-w-[640px] ml-auto">
             </div>
         </div>
     </div>
 </section>
 
-<section class="border-y border-white/10 bg-white/[0.02]">
+<section class="border-y border-slate-200 bg-white/40 dark:border-white/10 dark:bg-white/[0.02]">
     <div class="mx-auto max-w-screen-2xl px-4 sm:px-6 lg:px-8 py-8">
         <div class="grid grid-cols-1 sm:grid-cols-3 gap-6 sm:gap-8">
             <div class="flex items-start gap-4">
-                <div class="shrink-0 inline-flex h-11 w-11 items-center justify-center rounded-lg bg-blue-100/15 ring-1 ring-blue-100/25">
-                    <img src="{{ asset('images/icons/extract.svg') }}" alt="" width="24" height="24">
+                <div class="shrink-0 inline-flex h-11 w-11 items-center justify-center rounded-lg bg-blue-300/10 ring-1 ring-blue-300/25 dark:bg-blue-100/15 dark:ring-blue-100/25">
+                    <img src="{{ asset('images/icons/extract.svg') }}" alt="" width="24" height="24" class="dark:invert-0 invert">
                 </div>
                 <div>
                     <h2 class="text-base font-semibold tracking-wide">Extract</h2>
-                    <p class="mt-1 text-sm text-white/65">Read from any data source with a single typed API.</p>
+                    <p class="mt-1 text-sm text-slate-600 dark:text-white/65">Read from any data source with a single typed API.</p>
                 </div>
             </div>
             <div class="flex items-start gap-4">
-                <div class="shrink-0 inline-flex h-11 w-11 items-center justify-center rounded-lg bg-blue-100/15 ring-1 ring-blue-100/25">
-                    <img src="{{ asset('images/icons/transform.svg') }}" alt="" width="24" height="24">
+                <div class="shrink-0 inline-flex h-11 w-11 items-center justify-center rounded-lg bg-blue-300/10 ring-1 ring-blue-300/25 dark:bg-blue-100/15 dark:ring-blue-100/25">
+                    <img src="{{ asset('images/icons/transform.svg') }}" alt="" width="24" height="24" class="dark:invert-0 invert">
                 </div>
                 <div>
                     <h2 class="text-base font-semibold tracking-wide">Transform</h2>
-                    <p class="mt-1 text-sm text-white/65">Map, join, aggregate, window — composable and lazy.</p>
+                    <p class="mt-1 text-sm text-slate-600 dark:text-white/65">Map, join, aggregate, window — composable and lazy.</p>
                 </div>
             </div>
             <div class="flex items-start gap-4">
-                <div class="shrink-0 inline-flex h-11 w-11 items-center justify-center rounded-lg bg-blue-100/15 ring-1 ring-blue-100/25">
-                    <img src="{{ asset('images/icons/load.svg') }}" alt="" width="24" height="24">
+                <div class="shrink-0 inline-flex h-11 w-11 items-center justify-center rounded-lg bg-blue-300/10 ring-1 ring-blue-300/25 dark:bg-blue-100/15 dark:ring-blue-100/25">
+                    <img src="{{ asset('images/icons/load.svg') }}" alt="" width="24" height="24" class="dark:invert-0 invert">
                 </div>
                 <div>
                     <h2 class="text-base font-semibold tracking-wide">Load</h2>
-                    <p class="mt-1 text-sm text-white/65">Stream into any sink without blowing up memory.</p>
+                    <p class="mt-1 text-sm text-slate-600 dark:text-white/65">Stream into any sink without blowing up memory.</p>
                 </div>
             </div>
         </div>
diff --git a/web/landing/templates/main/index.html.twig b/web/landing/templates/main/index.html.twig
index 546239cce6..91c9118195 100644
--- a/web/landing/templates/main/index.html.twig
+++ b/web/landing/templates/main/index.html.twig
@@ -101,33 +101,33 @@ data_frame()
 
         <div class="mt-10 grid lg:grid-cols-2 gap-5">
             <div class="card !p-0 overflow-hidden flex flex-col">
-                <div class="flex items-center justify-between px-5 py-3 border-b border-white/10 bg-white/[0.02]">
-                    <span class="inline-flex items-center gap-2 text-sm font-medium text-white/85">
+                <div class="flex items-center justify-between px-5 py-3 border-b border-slate-200 bg-slate-50 dark:border-white/10 dark:bg-white/[0.02]">
+                    <span class="inline-flex items-center gap-2 text-sm font-medium text-slate-800 dark:text-white/85">
                         <span class="h-2 w-2 rounded-full bg-orange-100"></span>
                         Pure PHP
                     </span>
-                    <span class="text-xs text-white/40 font-mono">CSV → JSON</span>
+                    <span class="text-xs text-slate-500 font-mono dark:text-white/40">CSV → JSON</span>
                 </div>
                 <pre class="!m-0 !bg-transparent overflow-auto language-php text-sm leading-6 px-5 py-4 flex-1" data-controller="syntax-highlight"><code class="language-php">{{- purePhpCode | escape('html') -}}</code></pre>
             </div>
 
             <div class="card !p-0 overflow-hidden flex flex-col">
-                <div class="flex items-center justify-between px-5 py-3 border-b border-white/10 bg-white/[0.02]">
-                    <span class="inline-flex items-center gap-2 text-sm font-medium text-white/85">
-                        <span class="h-2 w-2 rounded-full bg-blue-100"></span>
+                <div class="flex items-center justify-between px-5 py-3 border-b border-slate-200 bg-slate-50 dark:border-white/10 dark:bg-white/[0.02]">
+                    <span class="inline-flex items-center gap-2 text-sm font-medium text-slate-800 dark:text-white/85">
+                        <span class="h-2 w-2 rounded-full bg-blue-300 dark:bg-blue-100"></span>
                         Flow PHP
                     </span>
-                    <span class="text-xs text-white/40 font-mono">CSV → JSON</span>
+                    <span class="text-xs text-slate-500 font-mono dark:text-white/40">CSV → JSON</span>
                 </div>
                 <pre class="!m-0 !bg-transparent overflow-auto language-php text-sm leading-6 px-5 py-4 flex-1" data-controller="syntax-highlight"><code class="language-php">{{- flowPhpCode | escape('html') -}}</code></pre>
             </div>
         </div>
 
-        <p class="mt-5 text-sm text-white/60 text-center">
-            Swap <code class="font-mono text-[#d2a8ff]">to_json</code> for
-            <code class="font-mono text-[#d2a8ff]">to_xlsx</code>,
-            <code class="font-mono text-[#d2a8ff]">to_parquet</code>, or
-            <code class="font-mono text-[#d2a8ff]">to_postgres</code> — same shape, different destination.
+        <p class="mt-5 text-sm text-slate-600 text-center dark:text-white/60">
+            Swap <code class="font-mono text-violet-700 dark:text-[#d2a8ff]">to_json</code> for
+            <code class="font-mono text-violet-700 dark:text-[#d2a8ff]">to_xlsx</code>,
+            <code class="font-mono text-violet-700 dark:text-[#d2a8ff]">to_parquet</code>, or
+            <code class="font-mono text-violet-700 dark:text-[#d2a8ff]">to_postgres</code> — same shape, different destination.
         </p>
     </section>
 
@@ -148,8 +148,8 @@ data_frame()
 
         <div class="mt-10 grid gap-5 md:grid-cols-2 xl:grid-cols-4">
             <article class="card card-hover">
-                <div class="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-blue-100/15 ring-1 ring-blue-100/25">
-                    <img src="{{ asset('images/icons/api.svg') }}" alt="" width="22" height="22">
+                <div class="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-blue-300/10 ring-1 ring-blue-300/25 dark:bg-blue-100/15 dark:ring-blue-100/25">
+                    <img src="{{ asset('images/icons/api.svg') }}" alt="" width="22" height="22" class="dark:invert-0 invert">
                 </div>
                 <h3 class="mt-5 text-xl font-semibold tracking-tight">Unified, typed API</h3>
                 <p class="mt-2 muted text-sm leading-relaxed">
@@ -159,8 +159,8 @@ data_frame()
             </article>
 
             <article class="card card-hover">
-                <div class="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-blue-100/15 ring-1 ring-blue-100/25">
-                    <img src="{{ asset('images/icons/chart-bar.svg') }}" alt="" width="22" height="22">
+                <div class="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-blue-300/10 ring-1 ring-blue-300/25 dark:bg-blue-100/15 dark:ring-blue-100/25">
+                    <img src="{{ asset('images/icons/chart-bar.svg') }}" alt="" width="22" height="22" class="dark:invert-0 invert">
                 </div>
                 <h3 class="mt-5 text-xl font-semibold tracking-tight">Constant memory</h3>
                 <p class="mt-2 muted text-sm leading-relaxed">
@@ -170,8 +170,8 @@ data_frame()
             </article>
 
             <article class="card card-hover">
-                <div class="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-blue-100/15 ring-1 ring-blue-100/25">
-                    <img src="{{ asset('images/icons/tools.svg') }}" alt="" width="22" height="22">
+                <div class="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-blue-300/10 ring-1 ring-blue-300/25 dark:bg-blue-100/15 dark:ring-blue-100/25">
+                    <img src="{{ asset('images/icons/tools.svg') }}" alt="" width="22" height="22" class="dark:invert-0 invert">
                 </div>
                 <h3 class="mt-5 text-xl font-semibold tracking-tight">Batteries included</h3>
                 <p class="mt-2 muted text-sm leading-relaxed">
@@ -181,8 +181,8 @@ data_frame()
             </article>
 
             <article class="card card-hover">
-                <div class="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-blue-100/15 ring-1 ring-blue-100/25">
-                    <img src="{{ asset('images/icons/data-flow.svg') }}" alt="" width="22" height="22">
+                <div class="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-blue-300/10 ring-1 ring-blue-300/25 dark:bg-blue-100/15 dark:ring-blue-100/25">
+                    <img src="{{ asset('images/icons/data-flow.svg') }}" alt="" width="22" height="22" class="dark:invert-0 invert">
                 </div>
                 <h3 class="mt-5 text-xl font-semibold tracking-tight">Observability</h3>
                 <p class="mt-2 muted text-sm leading-relaxed">
diff --git a/web/landing/templates/main/sponsor.html.twig b/web/landing/templates/main/sponsor.html.twig
index 8448bf0fd9..0e3bda665a 100644
--- a/web/landing/templates/main/sponsor.html.twig
+++ b/web/landing/templates/main/sponsor.html.twig
@@ -30,7 +30,7 @@
 
         <div class="mt-10 grid gap-5 md:grid-cols-2">
             <article class="card flex flex-col">
-                <div class="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-orange-100/15 ring-1 ring-orange-100/30">
+                <div class="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-orange-100/10 ring-1 ring-orange-200/30 dark:bg-orange-100/15 dark:ring-orange-100/30">
                     <img src="{{ asset('images/icons/heart.svg') }}" alt="" width="20" height="20">
                 </div>
                 <h2 class="mt-5 text-xl font-semibold tracking-tight">Sponsor on GitHub</h2>
@@ -40,14 +40,14 @@
                 </p>
                 <a href="https://github.com/sponsors/norberttech?frequency=one-time" target="_blank" rel="noopener"
                    class="btn btn-primary mt-5 self-start px-4 py-2">
-                    <img src="{{ asset('images/icons/github.svg') }}" alt="" width="16" height="16">
+                    <img src="{{ asset('images/icons/github.svg') }}" alt="" width="16" height="16" class="dark:invert-0 invert-0">
                     Sponsor on GitHub
                 </a>
             </article>
 
             <article class="card flex flex-col">
-                <div class="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-blue-100/15 ring-1 ring-blue-100/30">
-                    <img src="{{ asset('images/icons/users-group.svg') }}" alt="" width="20" height="20">
+                <div class="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-blue-300/10 ring-1 ring-blue-300/30 dark:bg-blue-100/15 dark:ring-blue-100/30">
+                    <img src="{{ asset('images/icons/users-group.svg') }}" alt="" width="20" height="20" class="dark:invert-0 invert">
                 </div>
                 <h2 class="mt-5 text-xl font-semibold tracking-tight">Hire me</h2>
                 <p class="mt-2 muted text-sm leading-relaxed flex-1">
diff --git a/web/landing/templates/partials/docs_mobile_nav.html.twig b/web/landing/templates/partials/docs_mobile_nav.html.twig
index 5318740667..8efa5b742d 100644
--- a/web/landing/templates/partials/docs_mobile_nav.html.twig
+++ b/web/landing/templates/partials/docs_mobile_nav.html.twig
@@ -1,7 +1,7 @@
 <div class="lg:hidden mb-6">
     <button type="button" popovertarget="docs-mobile-nav" popovertargetaction="show"
-            class="inline-flex items-center gap-2 rounded-lg border border-white/10 bg-white/[0.04] hover:border-white/20 hover:bg-white/[0.08] px-3 py-2 text-sm font-medium text-white/85 transition-colors">
-        <img src="{{ asset('images/icons/menu.svg') }}" alt="" width="16" height="16" class="opacity-80">
+            class="inline-flex items-center gap-2 rounded-lg border border-slate-300 bg-white hover:border-slate-400 hover:bg-slate-50 px-3 py-2 text-sm font-medium text-slate-700 transition-colors dark:border-white/10 dark:bg-white/[0.04] dark:hover:border-white/20 dark:hover:bg-white/[0.08] dark:text-white/85">
+        <img src="{{ asset('images/icons/menu.svg') }}" alt="" width="16" height="16" class="opacity-80 dark:invert-0 invert">
         Browse documentation
     </button>
 </div>
diff --git a/web/landing/templates/partials/docs_mobile_nav_panel.html.twig b/web/landing/templates/partials/docs_mobile_nav_panel.html.twig
index a4301fd8ec..c192bb447f 100644
--- a/web/landing/templates/partials/docs_mobile_nav_panel.html.twig
+++ b/web/landing/templates/partials/docs_mobile_nav_panel.html.twig
@@ -1,11 +1,11 @@
 <nav popover id="docs-mobile-nav" aria-label="Documentation"
-     class="lg:hidden fixed inset-0 m-0 w-screen h-[100dvh] max-h-none max-w-none overflow-y-auto overscroll-contain bg-black text-white">
-    <div class="sticky top-0 z-10 flex h-16 items-center justify-between px-4 sm:px-6 border-b border-white/10 bg-black/90 backdrop-blur">
+     class="lg:hidden fixed inset-0 m-0 w-screen h-[100dvh] max-h-none max-w-none overflow-y-auto overscroll-contain bg-[#e8eef7] text-slate-900 dark:bg-black dark:text-white">
+    <div class="sticky top-0 z-10 flex h-16 items-center justify-between px-4 sm:px-6 border-b border-slate-200 bg-[#e8eef7]/90 backdrop-blur dark:border-white/10 dark:bg-black/90">
         <span class="font-semibold tracking-wide">Documentation</span>
         <button type="button" popovertarget="docs-mobile-nav" popovertargetaction="hide"
                 aria-label="Close documentation menu"
-                class="inline-flex h-10 w-10 items-center justify-center rounded-md hover:bg-white/[0.06]">
-            <img src="{{ asset('images/icons/close.svg') }}" alt="" width="24" height="24">
+                class="inline-flex h-10 w-10 items-center justify-center rounded-md text-slate-700 hover:bg-slate-100 dark:text-white dark:hover:bg-white/[0.06]">
+            <img src="{{ asset('images/icons/close.svg') }}" alt="" width="24" height="24" class="dark:invert-0 invert">
         </button>
     </div>
     <div class="px-4 sm:px-6 py-6 space-y-10">
diff --git a/web/landing/templates/partials/footer.html.twig b/web/landing/templates/partials/footer.html.twig
index 7dfc1d883c..40714addaa 100644
--- a/web/landing/templates/partials/footer.html.twig
+++ b/web/landing/templates/partials/footer.html.twig
@@ -1,53 +1,53 @@
 {# Multi-column footer. `wide` removes the max-w container for full-width pages. #}
-<footer class="border-t border-white/10 bg-black/40 mt-12">
+<footer class="border-t border-slate-200 bg-white/60 mt-12 dark:border-white/10 dark:bg-black/40">
     <div class="{{ wide|default(false) ? 'px-4 lg:px-8 xl:px-12' : 'mx-auto max-w-screen-2xl px-4 sm:px-6' }} py-12">
         <div class="grid gap-10 lg:grid-cols-[1.5fr_repeat(3,1fr)]">
             <div>
                 <a href="{{ path('home') }}" class="inline-flex items-center" aria-label="Flow PHP — home">
-                    <img src="{{ asset('images/logo.svg') }}" alt="" width="146" height="40" class="h-9 w-auto">
+                    <img src="{{ asset('images/logo.svg') }}" alt="" width="146" height="40" class="h-9 w-auto dark:invert-0 invert">
                 </a>
-                <p class="mt-4 max-w-sm text-sm text-white/70">
+                <p class="mt-4 max-w-sm text-sm text-slate-600 dark:text-white/70">
                     Strongly typed, memory efficient PHP framework for unified data processing.
                 </p>
             </div>
 
             <div>
-                <h3 class="text-xs font-semibold uppercase tracking-[0.18em] text-white/50 mb-3">Product</h3>
+                <h3 class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500 mb-3 dark:text-white/50">Product</h3>
                 <ul class="space-y-2 text-sm">
-                    <li><a class="text-white/80 hover:text-white no-underline" href="{{ path('documentation') }}">Docs</a></li>
-                    <li><a class="text-white/80 hover:text-white no-underline" href="{{ path('playground') }}">Playground</a></li>
-                    <li><a class="text-white/80 hover:text-white no-underline" href="{{ path('example_option', {topic: 'data_frame', example: 'data_reading', option: 'array', _fragment: 'example'}) }}">Examples</a></li>
-                    <li><a class="text-white/80 hover:text-white no-underline" href="{{ path('changelog') }}">Changelog</a></li>
+                    <li><a class="text-slate-700 hover:text-slate-900 no-underline dark:text-white/80 dark:hover:text-white" href="{{ path('documentation') }}">Docs</a></li>
+                    <li><a class="text-slate-700 hover:text-slate-900 no-underline dark:text-white/80 dark:hover:text-white" href="{{ path('playground') }}">Playground</a></li>
+                    <li><a class="text-slate-700 hover:text-slate-900 no-underline dark:text-white/80 dark:hover:text-white" href="{{ path('example_option', {topic: 'data_frame', example: 'data_reading', option: 'array', _fragment: 'example'}) }}">Examples</a></li>
+                    <li><a class="text-slate-700 hover:text-slate-900 no-underline dark:text-white/80 dark:hover:text-white" href="{{ path('changelog') }}">Changelog</a></li>
                 </ul>
             </div>
 
             <div>
-                <h3 class="text-xs font-semibold uppercase tracking-[0.18em] text-white/50 mb-3">Community</h3>
+                <h3 class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500 mb-3 dark:text-white/50">Community</h3>
                 <ul class="space-y-2 text-sm">
-                    <li><a class="text-white/80 hover:text-white no-underline" href="{{ path('blog') }}">Blog</a></li>
-                    <li><a class="text-white/80 hover:text-white no-underline" href="https://github.com/flow-php/flow" target="_blank" rel="noopener">Repository</a></li>
-                    <li><a class="text-white/80 hover:text-white no-underline" href="https://github.com/orgs/flow-php/projects/1" target="_blank" rel="noopener">Roadmap</a></li>
-                    <li><a class="text-white/80 hover:text-white no-underline" href="https://discord.gg/5dNXfQyACW" target="_blank" rel="noopener">Discord</a></li>
+                    <li><a class="text-slate-700 hover:text-slate-900 no-underline dark:text-white/80 dark:hover:text-white" href="{{ path('blog') }}">Blog</a></li>
+                    <li><a class="text-slate-700 hover:text-slate-900 no-underline dark:text-white/80 dark:hover:text-white" href="https://github.com/flow-php/flow" target="_blank" rel="noopener">Repository</a></li>
+                    <li><a class="text-slate-700 hover:text-slate-900 no-underline dark:text-white/80 dark:hover:text-white" href="https://github.com/orgs/flow-php/projects/1" target="_blank" rel="noopener">Roadmap</a></li>
+                    <li><a class="text-slate-700 hover:text-slate-900 no-underline dark:text-white/80 dark:hover:text-white" href="https://discord.gg/5dNXfQyACW" target="_blank" rel="noopener">Discord</a></li>
                 </ul>
             </div>
 
             <div>
-                <h3 class="text-xs font-semibold uppercase tracking-[0.18em] text-white/50 mb-3">Support</h3>
+                <h3 class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500 mb-3 dark:text-white/50">Support</h3>
                 <ul class="space-y-2 text-sm">
-                    <li><a class="text-white/80 hover:text-white no-underline" href="{{ path('sponsor') }}">Sponsor</a></li>
-                    <li><a class="text-white/80 hover:text-white no-underline" href="{{ path('documentation_page', {path: 'security'}) }}">Security</a></li>
-                    <li><a class="text-white/80 hover:text-white no-underline" href="{{ path('documentation_page', {path: 'contributing'}) }}">Contributing</a></li>
+                    <li><a class="text-slate-700 hover:text-slate-900 no-underline dark:text-white/80 dark:hover:text-white" href="{{ path('sponsor') }}">Sponsor</a></li>
+                    <li><a class="text-slate-700 hover:text-slate-900 no-underline dark:text-white/80 dark:hover:text-white" href="{{ path('documentation_page', {path: 'security'}) }}">Security</a></li>
+                    <li><a class="text-slate-700 hover:text-slate-900 no-underline dark:text-white/80 dark:hover:text-white" href="{{ path('documentation_page', {path: 'contributing'}) }}">Contributing</a></li>
                 </ul>
             </div>
         </div>
 
-        <div class="mt-10 pt-6 border-t border-white/10 flex flex-col sm:flex-row gap-4 sm:items-center sm:justify-between text-xs text-white/60">
+        <div class="mt-10 pt-6 border-t border-slate-200 flex flex-col sm:flex-row gap-4 sm:items-center sm:justify-between text-xs text-slate-500 dark:border-white/10 dark:text-white/60">
             <p>&copy; {{ 'now' | date('Y') }} Flow PHP. Open source under MIT.</p>
             <p>
                 Built by
-                <a href="https://norbert.tech" target="_blank" rel="noopener" class="text-white/80 hover:text-white no-underline">@norberttech</a>
+                <a href="https://norbert.tech" target="_blank" rel="noopener" class="text-slate-700 hover:text-slate-900 no-underline dark:text-white/80 dark:hover:text-white">@norberttech</a>
                 and
-                <a href="https://github.com/flow-php/flow/graphs/contributors" target="_blank" rel="noopener" class="text-white/80 hover:text-white no-underline">contributors</a>.
+                <a href="https://github.com/flow-php/flow/graphs/contributors" target="_blank" rel="noopener" class="text-slate-700 hover:text-slate-900 no-underline dark:text-white/80 dark:hover:text-white">contributors</a>.
             </p>
         </div>
     </div>
diff --git a/web/landing/templates/partials/header.html.twig b/web/landing/templates/partials/header.html.twig
index 36cf5f3468..0d7c0f3628 100644
--- a/web/landing/templates/partials/header.html.twig
+++ b/web/landing/templates/partials/header.html.twig
@@ -1,16 +1,16 @@
 {# Sticky glass header. `wide` removes the max-w container for full-width pages. #}
-<header class="sticky top-0 z-50 border-b border-white/10 bg-black/70 backdrop-blur-md supports-[backdrop-filter]:bg-black/55">
+<header class="sticky top-0 z-50 border-b border-slate-200 bg-[#e8eef7]/80 backdrop-blur-md supports-[backdrop-filter]:bg-[#e8eef7]/65 dark:border-white/10 dark:bg-black/70 dark:supports-[backdrop-filter]:bg-black/55">
     <div class="{{ wide|default(false) ? 'px-4 lg:px-8 xl:px-12' : 'mx-auto max-w-screen-2xl px-4 sm:px-6' }} flex h-16 items-center justify-between gap-4">
         <a href="{{ path('home') }}" class="shrink-0 inline-flex items-center" aria-label="Flow PHP — home">
-            <img src="{{ asset('images/logo.svg') }}" alt="" width="146" height="40" class="h-7 w-auto lg:h-9">
+            <img src="{{ asset('images/logo.svg') }}" alt="" width="146" height="40" class="h-7 w-auto lg:h-9 dark:invert-0 invert">
         </a>
 
         <button type="button" popovertarget="search-modal" popovertargetaction="show"
-                class="hidden lg:inline-flex items-center gap-3 rounded-lg border border-white/10 bg-white/[0.04] hover:border-white/20 hover:bg-white/[0.08] px-3 py-2 text-sm text-white/60 hover:text-white/85 transition-colors lg:min-w-[12rem] xl:min-w-[18rem]"
+                class="hidden lg:inline-flex items-center gap-3 rounded-lg border border-slate-300 bg-white hover:border-slate-400 hover:bg-slate-50 px-3 py-2 text-sm text-slate-500 hover:text-slate-700 transition-colors lg:min-w-[12rem] xl:min-w-[18rem] dark:border-white/10 dark:bg-white/[0.04] dark:hover:border-white/20 dark:hover:bg-white/[0.08] dark:text-white/60 dark:hover:text-white/85"
                 aria-label="Search documentation">
-            <img src="{{ asset('images/icons/search.svg') }}" alt="" width="16" height="16" class="opacity-70">
+            <img src="{{ asset('images/icons/search.svg') }}" alt="" width="16" height="16" class="opacity-70 dark:invert-0 invert">
             <span class="flex-1 text-left">Search docs…</span>
-            <kbd class="hidden xl:inline-flex h-5 items-center rounded border border-white/15 bg-black/40 px-1.5 text-[10px] font-mono text-white/55">/</kbd>
+            <kbd class="hidden xl:inline-flex h-5 items-center rounded border border-slate-300 bg-white/60 px-1.5 text-[10px] font-mono text-slate-500 dark:border-white/15 dark:bg-black/40 dark:text-white/55">/</kbd>
         </button>
 
         <nav aria-label="Primary" class="hidden lg:flex items-center gap-1 text-sm">
@@ -23,7 +23,7 @@
             {% for item in primary %}
                 {% set active = app.request.attributes.get('_route') starts with item.route %}
                 <a href="{{ item.href }}"
-                   class="rounded-md px-3 py-2 font-medium text-white/75 transition-colors hover:text-white hover:bg-white/[0.06] no-underline {{ active ? '!text-white bg-white/[0.08]' }}"
+                   class="rounded-md px-3 py-2 font-medium text-slate-600 hover:text-slate-900 hover:bg-slate-100 dark:text-white/75 dark:hover:text-white dark:hover:bg-white/[0.06] transition-colors no-underline {{ active ? '!text-slate-900 bg-slate-100 dark:!text-white dark:bg-white/[0.08]' }}"
                    {% if active %}aria-current="page"{% endif %}>
                     {{ item.label }}
                 </a>
@@ -32,41 +32,43 @@
 
         <div class="hidden lg:flex items-center gap-2">
             <a href="{{ path('sponsor') }}"
-               class="hidden xl:inline-flex items-center gap-1.5 rounded-md px-3 py-2 text-sm font-medium text-white/75 hover:text-white hover:bg-white/[0.06] no-underline">
+               class="hidden xl:inline-flex items-center gap-1.5 rounded-md px-3 py-2 text-sm font-medium text-slate-600 hover:text-slate-900 hover:bg-slate-100 dark:text-white/75 dark:hover:text-white dark:hover:bg-white/[0.06] no-underline">
                 <img src="{{ asset('images/icons/heart.svg') }}" alt="" width="16" height="16" class="shrink-0">
                 Sponsor
             </a>
             <a href="https://discord.gg/5dNXfQyACW" target="_blank" rel="noopener"
                aria-label="Discord (opens in new tab)"
-               class="inline-flex h-9 w-9 items-center justify-center rounded-md text-white/75 hover:text-white hover:bg-white/[0.06] no-underline">
-                <img src="{{ asset('images/icons/discord.svg') }}" alt="" width="18" height="18">
+               class="inline-flex h-9 w-9 items-center justify-center rounded-md text-slate-600 hover:text-slate-900 hover:bg-slate-100 dark:text-white/75 dark:hover:text-white dark:hover:bg-white/[0.06] no-underline">
+                <img src="{{ asset('images/icons/discord.svg') }}" alt="" width="18" height="18" class="dark:invert-0 invert">
             </a>
             <a href="https://github.com/flow-php/flow" target="_blank" rel="noopener"
                aria-label="Repository on GitHub (opens in new tab)"
-               class="inline-flex h-9 w-9 items-center justify-center rounded-md text-white/75 hover:text-white hover:bg-white/[0.06] no-underline">
-                <img src="{{ asset('images/icons/github.svg') }}" alt="" width="18" height="18">
+               class="inline-flex h-9 w-9 items-center justify-center rounded-md text-slate-600 hover:text-slate-900 hover:bg-slate-100 dark:text-white/75 dark:hover:text-white dark:hover:bg-white/[0.06] no-underline">
+                <img src="{{ asset('images/icons/github.svg') }}" alt="" width="18" height="18" class="dark:invert-0 invert">
             </a>
+
+            {% include 'partials/theme_switch.html.twig' %}
         </div>
 
         <button popovertarget="mobile-nav" popovertargetaction="show"
                 aria-label="Open menu"
-                class="lg:hidden inline-flex h-10 w-10 items-center justify-center rounded-md hover:bg-white/[0.06]">
-            <img src="{{ asset('images/icons/menu.svg') }}" alt="" width="24" height="24">
+                class="lg:hidden inline-flex h-10 w-10 items-center justify-center rounded-md text-slate-700 hover:bg-slate-100 dark:text-white dark:hover:bg-white/[0.06]">
+            <img src="{{ asset('images/icons/menu.svg') }}" alt="" width="24" height="24" class="dark:invert-0 invert">
         </button>
 
-        <nav popover id="mobile-nav" aria-label="Mobile" class="lg:hidden fixed inset-0 m-0 w-screen h-[100dvh] max-h-none max-w-none overflow-y-auto overscroll-contain bg-black text-white">
-            <div class="flex h-16 items-center justify-between px-4 sm:px-6 border-b border-white/10">
+        <nav popover id="mobile-nav" aria-label="Mobile" class="lg:hidden fixed inset-0 m-0 w-screen h-[100dvh] max-h-none max-w-none overflow-y-auto overscroll-contain bg-[#e8eef7] text-slate-900 dark:bg-black dark:text-white">
+            <div class="flex h-16 items-center justify-between px-4 sm:px-6 border-b border-slate-200 dark:border-white/10">
                 <span class="font-semibold tracking-wide">Menu</span>
                 <button popovertarget="mobile-nav" popovertargetaction="hide"
                         aria-label="Close menu"
-                        class="inline-flex h-10 w-10 items-center justify-center rounded-md hover:bg-white/[0.06]">
-                    <img src="{{ asset('images/icons/close.svg') }}" alt="" width="24" height="24">
+                        class="inline-flex h-10 w-10 items-center justify-center rounded-md text-slate-700 hover:bg-slate-100 dark:text-white dark:hover:bg-white/[0.06]">
+                    <img src="{{ asset('images/icons/close.svg') }}" alt="" width="24" height="24" class="dark:invert-0 invert">
                 </button>
             </div>
             <div class="px-4 sm:px-6 py-6 space-y-6">
                 <button type="button" popovertarget="search-modal" popovertargetaction="show"
-                        class="flex items-center gap-3 w-full rounded-lg border border-white/10 bg-white/[0.04] hover:border-white/20 hover:bg-white/[0.08] px-3 py-3 text-left text-white/75 hover:text-white transition-colors">
-                    <img src="{{ asset('images/icons/search.svg') }}" alt="" width="20" height="20" class="opacity-75">
+                        class="flex items-center gap-3 w-full rounded-lg border border-slate-300 bg-white hover:border-slate-400 hover:bg-slate-50 px-3 py-3 text-left text-slate-600 hover:text-slate-900 dark:border-white/10 dark:bg-white/[0.04] dark:hover:border-white/20 dark:hover:bg-white/[0.08] dark:text-white/75 dark:hover:text-white transition-colors">
+                    <img src="{{ asset('images/icons/search.svg') }}" alt="" width="20" height="20" class="opacity-75 dark:invert-0 invert">
                     <span class="flex-1">Search docs…</span>
                 </button>
 
@@ -81,29 +83,36 @@
                     {% for item in mobileNav %}
                         <li>
                             <a href="{{ item.href }}"
-                               class="flex items-center gap-3 rounded-lg px-3 py-3 font-medium text-white hover:bg-white/[0.06] no-underline">
-                                <img src="{{ asset('images/icons/' ~ item.icon ~ '.svg') }}" alt="" width="20" height="20" class="opacity-75">
+                               class="flex items-center gap-3 rounded-lg px-3 py-3 font-medium text-slate-900 hover:bg-slate-100 dark:text-white dark:hover:bg-white/[0.06] no-underline">
+                                <img src="{{ asset('images/icons/' ~ item.icon ~ '.svg') }}" alt="" width="20" height="20" class="opacity-75 {% if item.icon != 'heart' %}dark:invert-0 invert{% endif %}">
                                 {{ item.label }}
                             </a>
                         </li>
                     {% endfor %}
                 </ul>
 
-                <div class="pt-6 border-t border-white/10 space-y-1">
-                    <p class="px-3 mb-2 text-xs font-semibold uppercase tracking-[0.18em] text-white/50">Community</p>
+                <div class="pt-6 border-t border-slate-200 dark:border-white/10 space-y-1">
+                    <p class="px-3 mb-2 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500 dark:text-white/50">Theme</p>
+                    <div class="px-3">
+                        {% include 'partials/theme_switch.html.twig' with {variant: 'inline'} %}
+                    </div>
+                </div>
+
+                <div class="pt-6 border-t border-slate-200 dark:border-white/10 space-y-1">
+                    <p class="px-3 mb-2 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500 dark:text-white/50">Community</p>
                     <a href="https://github.com/flow-php/flow" target="_blank" rel="noopener"
-                       class="flex items-center gap-3 rounded-lg px-3 py-3 text-white/85 hover:bg-white/[0.06] no-underline">
-                        <img src="{{ asset('images/icons/github.svg') }}" alt="" width="20" height="20" class="opacity-75">
+                       class="flex items-center gap-3 rounded-lg px-3 py-3 text-slate-700 hover:bg-slate-100 dark:text-white/85 dark:hover:bg-white/[0.06] no-underline">
+                        <img src="{{ asset('images/icons/github.svg') }}" alt="" width="20" height="20" class="opacity-75 dark:invert-0 invert">
                         Repository
                     </a>
                     <a href="https://github.com/orgs/flow-php/projects/1" target="_blank" rel="noopener"
-                       class="flex items-center gap-3 rounded-lg px-3 py-3 text-white/85 hover:bg-white/[0.06] no-underline">
-                        <img src="{{ asset('images/icons/date.svg') }}" alt="" width="20" height="20" class="opacity-75">
+                       class="flex items-center gap-3 rounded-lg px-3 py-3 text-slate-700 hover:bg-slate-100 dark:text-white/85 dark:hover:bg-white/[0.06] no-underline">
+                        <img src="{{ asset('images/icons/date.svg') }}" alt="" width="20" height="20" class="opacity-75 dark:invert-0 invert">
                         Roadmap
                     </a>
                     <a href="https://discord.gg/5dNXfQyACW" target="_blank" rel="noopener"
-                       class="flex items-center gap-3 rounded-lg px-3 py-3 text-white/85 hover:bg-white/[0.06] no-underline">
-                        <img src="{{ asset('images/icons/discord.svg') }}" alt="" width="20" height="20" class="opacity-75">
+                       class="flex items-center gap-3 rounded-lg px-3 py-3 text-slate-700 hover:bg-slate-100 dark:text-white/85 dark:hover:bg-white/[0.06] no-underline">
+                        <img src="{{ asset('images/icons/discord.svg') }}" alt="" width="20" height="20" class="opacity-75 dark:invert-0 invert">
                         Discord
                     </a>
                 </div>
@@ -113,17 +122,17 @@
 </header>
 
 <div popover id="search-modal"
-     class="fixed inset-0 m-0 w-screen h-[100dvh] max-h-none max-w-none overflow-y-auto overscroll-contain bg-black/80 backdrop-blur-md"
+     class="fixed inset-0 m-0 w-screen h-[100dvh] max-h-none max-w-none overflow-y-auto overscroll-contain bg-slate-900/40 backdrop-blur-md dark:bg-black/80"
      {{ stimulus_controller('site_search') }}
      data-site-search-bundle-path-value="/pagefind/">
     <div class="mx-auto mt-20 max-w-4xl px-4">
-        <div class="rounded-2xl border border-white/10 bg-[#1b1925] shadow-2xl overflow-hidden">
-            <div class="flex items-center justify-between gap-3 px-4 py-3 border-b border-white/10">
-                <span class="text-xs font-semibold uppercase tracking-[0.18em] text-white/50">Search</span>
+        <div class="rounded-2xl border border-slate-200 bg-white shadow-2xl overflow-hidden dark:border-white/10 dark:bg-[#1b1925]">
+            <div class="flex items-center justify-between gap-3 px-4 py-3 border-b border-slate-200 dark:border-white/10">
+                <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500 dark:text-white/50">Search</span>
                 <button popovertarget="search-modal" popovertargetaction="hide"
-                        class="inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-white/[0.06]"
+                        class="inline-flex h-8 w-8 items-center justify-center rounded-md text-slate-700 hover:bg-slate-100 dark:text-white dark:hover:bg-white/[0.06]"
                         aria-label="Close search">
-                    <img src="{{ asset('images/icons/close.svg') }}" alt="" width="18" height="18">
+                    <img src="{{ asset('images/icons/close.svg') }}" alt="" width="18" height="18" class="dark:invert-0 invert">
                 </button>
             </div>
             <div id="site-search" data-site-search-target="mount" class="p-3"></div>
diff --git a/web/landing/templates/partials/theme_switch.html.twig b/web/landing/templates/partials/theme_switch.html.twig
new file mode 100644
index 0000000000..dedbff06fe
--- /dev/null
+++ b/web/landing/templates/partials/theme_switch.html.twig
@@ -0,0 +1,73 @@
+{# Theme switch (System / Light / Dark).
+   variant = 'dropdown' (default) — icon button with popover, used in desktop header.
+   variant = 'inline'             — segmented control with all 3 options visible, used in mobile nav. #}
+{% set variant = variant|default('dropdown') %}
+{% set themeOptions = [
+    { value: 'light',  label: 'Light',  iconPath: '<circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/>' },
+    { value: 'dark',   label: 'Dark',   iconPath: '<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>' },
+    { value: 'system', label: 'System', iconPath: '<rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/>' },
+] %}
+
+{% if variant == 'inline' %}
+    <div {{ stimulus_controller('theme-switch') }}
+         role="radiogroup"
+         aria-label="Theme"
+         class="grid grid-cols-3 gap-1 rounded-lg border border-slate-200 bg-white p-1 dark:border-white/10 dark:bg-white/[0.04]">
+        {% for option in themeOptions %}
+            <button type="button"
+                    role="radio"
+                    aria-checked="false"
+                    data-theme-switch-target="option"
+                    data-theme-option="{{ option.value }}"
+                    data-action="click->theme-switch#select"
+                    class="group inline-flex items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-100 hover:text-slate-900 data-[active=true]:bg-orange-100 data-[active=true]:text-white data-[active=true]:hover:bg-orange-200 dark:text-white/80 dark:hover:bg-white/[0.06] dark:hover:text-white dark:data-[active=true]:bg-orange-100 dark:data-[active=true]:text-white dark:data-[active=true]:hover:bg-orange-200 transition-colors">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    {{ option.iconPath|raw }}
+                </svg>
+                {{ option.label }}
+            </button>
+        {% endfor %}
+    </div>
+{% else %}
+    <div class="relative" {{ stimulus_controller('theme-switch') }}>
+        <button type="button"
+                aria-label="Theme"
+                aria-haspopup="menu"
+                data-action="click->theme-switch#toggle"
+                class="inline-flex h-9 w-9 items-center justify-center rounded-md text-slate-600 hover:text-slate-900 hover:bg-slate-100 dark:text-white/75 dark:hover:text-white dark:hover:bg-white/[0.06] no-underline transition-colors">
+            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="hidden" data-theme-switch-target="currentIcon" data-theme-icon="light" aria-hidden="true">
+                <circle cx="12" cy="12" r="4"/>
+                <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/>
+            </svg>
+            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="hidden" data-theme-switch-target="currentIcon" data-theme-icon="dark" aria-hidden="true">
+                <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
+            </svg>
+            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="hidden" data-theme-switch-target="currentIcon" data-theme-icon="system" aria-hidden="true">
+                <rect x="2" y="3" width="20" height="14" rx="2"/>
+                <path d="M8 21h8M12 17v4"/>
+            </svg>
+        </button>
+
+        <div data-theme-switch-target="menu"
+             role="menu"
+             class="hidden absolute right-0 top-full mt-2 z-50 min-w-[10rem] rounded-lg border border-slate-200 bg-white shadow-lg p-1 text-sm dark:border-white/10 dark:bg-[#1b1925] dark:shadow-2xl">
+            {% for option in themeOptions %}
+                <button type="button"
+                        role="menuitemradio"
+                        aria-checked="false"
+                        data-theme-switch-target="option"
+                        data-theme-option="{{ option.value }}"
+                        data-action="click->theme-switch#select"
+                        class="group flex w-full items-center gap-2.5 rounded-md px-2.5 py-2 text-left text-slate-700 hover:bg-slate-100 hover:text-slate-900 data-[active=true]:bg-slate-100 data-[active=true]:text-slate-900 dark:text-white/80 dark:hover:bg-white/[0.06] dark:hover:text-white dark:data-[active=true]:bg-white/[0.08] dark:data-[active=true]:text-white transition-colors">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="text-slate-500 group-hover:text-slate-700 group-data-[active=true]:text-orange-200 dark:text-white/65 dark:group-hover:text-white dark:group-data-[active=true]:text-orange-100" aria-hidden="true">
+                        {{ option.iconPath|raw }}
+                    </svg>
+                    <span class="flex-1">{{ option.label }}</span>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="hidden group-data-[active=true]:block text-orange-200 dark:text-orange-100" aria-hidden="true">
+                        <polyline points="20 6 9 17 4 12"/>
+                    </svg>
+                </button>
+            {% endfor %}
+        </div>
+    </div>
+{% endif %}
diff --git a/web/landing/templates/partials/topic_nav.html.twig b/web/landing/templates/partials/topic_nav.html.twig
index 684fb399bf..6a519adee5 100644
--- a/web/landing/templates/partials/topic_nav.html.twig
+++ b/web/landing/templates/partials/topic_nav.html.twig
@@ -3,14 +3,14 @@
      topicsNavigation: dict<string topic, {name, arguments}>
      currentTopic: string|null
 #}
-<nav aria-label="Example topics" class="rounded-xl border border-white/10 bg-white/[0.03] p-1.5">
+<nav aria-label="Example topics" class="rounded-xl border border-slate-200 bg-white p-1.5 dark:border-white/10 dark:bg-white/[0.03]">
     <ul class="flex whitespace-nowrap overflow-x-auto gap-1 scrollbar-hide">
         {% for topic, route in topicsNavigation %}
             {% set isActive = (currentTopic == topic) or (currentTopic is null and loop.first) %}
             <li class="grow">
                 <a href="{{ path(route.name, route.arguments) }}#example"
                    class="flex items-center justify-center w-full rounded-lg px-4 py-2 text-sm font-medium no-underline transition-colors
-                          {{ isActive ? 'bg-orange-100 text-white hover:bg-orange-200' : 'text-white/75 hover:text-white hover:bg-white/[0.06]' }}"
+                          {{ isActive ? 'bg-orange-100 text-white hover:bg-orange-200' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100 dark:text-white/75 dark:hover:text-white dark:hover:bg-white/[0.06]' }}"
                    {% if isActive %}aria-current="page"{% endif %}>
                     {{ topic|humanize }}
                 </a>
diff --git a/web/landing/templates/playground/_playground.html.twig b/web/landing/templates/playground/_playground.html.twig
index 66e3c341de..6c8fdb37e2 100644
--- a/web/landing/templates/playground/_playground.html.twig
+++ b/web/landing/templates/playground/_playground.html.twig
@@ -108,7 +108,7 @@ Parameters:
         <h1>Playground</h1>
         {% if back_url is defined and back_url is not null %}
         <a href="{{ back_url }}" class="back-link">
-            <img src="{{ asset('images/icons/arrow-left.svg') }}" alt="" width="16" height="16">
+            <img src="{{ asset('images/icons/arrow-left.svg') }}" alt="" width="16" height="16" class="dark:invert-0 invert">
             {{ back_label|default('Back') }}
         </a>
         {% endif %}
@@ -117,7 +117,7 @@ Parameters:
                 data-help-topic="help-about"
                 class="help-trigger mb-4"
                 aria-label="What is Flow Playground?">
-            <img src="{{ asset('images/icons/help.svg') }}" alt="Help" width="20" height="20">
+            <img src="{{ asset('images/icons/help.svg') }}" alt="Help" width="20" height="20" class="dark:invert-0 invert">
         </button>
     </div>
 
@@ -201,7 +201,7 @@ Parameters:
                     data-help-topic="help-navigation"
                     class="help-trigger-nav pt-2"
                     aria-label="What do these buttons do?">
-                <img src="{{ asset('images/icons/help.svg') }}" alt="Help" width="18" height="18">
+                <img src="{{ asset('images/icons/help.svg') }}" alt="Help" width="18" height="18" class="dark:invert-0 invert">
             </button>
             <button
                     id="action-run"
@@ -217,37 +217,43 @@ Parameters:
             <button
                     id="action-format"
                     aria-label="Format"
+                    class="group"
                     data-controller="image-swap"
                     data-action="click->playground-format#format mouseenter->image-swap#mouseEnter mouseleave->image-swap#mouseLeave">
                 <span class="hidden sm:inline">Format</span>
                 <img src="{{ asset('images/icons/code.svg') }}"
                      alt=""
                      data-image-swap-target="image"
-                     data-hover-src="{{ asset('images/icons/code-active.svg') }}">
+                     data-hover-src="{{ asset('images/icons/code-active.svg') }}"
+                     class="dark:invert-0 group-hover:invert-0 invert">
             </button>
             {% if show_share %}
             <button
                     id="action-share"
                     aria-label="Share"
+                    class="group"
                     data-controller="image-swap"
                     data-action="click->playground-share#share mouseenter->image-swap#mouseEnter mouseleave->image-swap#mouseLeave">
                 <span class="hidden sm:inline">Share</span>
                 <img src="{{ asset('images/icons/share.svg') }}"
                      alt=""
                      data-image-swap-target="image"
-                     data-hover-src="{{ asset('images/icons/share-active.svg') }}">
+                     data-hover-src="{{ asset('images/icons/share-active.svg') }}"
+                     class="dark:invert-0 group-hover:invert-0 invert">
             </button>
             {% endif %}
             <button
                     id="action-upload"
                     aria-label="Upload"
+                    class="group"
                     data-controller="image-swap"
                     data-action="click->playground-upload#triggerUpload mouseenter->image-swap#mouseEnter mouseleave->image-swap#mouseLeave">
                 <span class="hidden sm:inline">Upload</span>
                 <img src="{{ asset('images/icons/upload.svg') }}"
                      alt=""
                      data-image-swap-target="image"
-                     data-hover-src="{{ asset('images/icons/upload-active.svg') }}">
+                     data-hover-src="{{ asset('images/icons/upload-active.svg') }}"
+                     class="dark:invert-0 group-hover:invert-0 invert">
             </button>
             <input type="file"
                    data-playground-upload-target="fileInput"
@@ -258,6 +264,7 @@ Parameters:
             <a href="{{ path('playground') }}"
                id="action-reset"
                aria-label="Reset"
+               class="group"
                data-controller="image-swap playground-reset"
                data-playground-reset-playground-storage-outlet="#playground"
                data-action="click->playground-reset#confirmReset mouseenter->image-swap#mouseEnter mouseleave->image-swap#mouseLeave">
@@ -265,7 +272,8 @@ Parameters:
                 <img src="{{ asset('images/icons/refresh.svg') }}"
                      alt=""
                      data-image-swap-target="image"
-                     data-hover-src="{{ asset('images/icons/refresh-active.svg') }}">
+                     data-hover-src="{{ asset('images/icons/refresh-active.svg') }}"
+                     class="dark:invert-0 group-hover:invert-0 invert">
             </a>
         </div>
     </div>