From fce9ded30a37c087ef6952e2b64af6b09b8ffff6 Mon Sep 17 00:00:00 2001
From: Peter Steinberger <steipete@gmail.com>
Date: Tue, 9 Dec 2025 21:22:21 +0000
Subject: [PATCH] feat(webchat): sync theme with system

---
 .../Clawdis/Resources/WebChat/bootstrap.js    | 25 +++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/apps/macos/Sources/Clawdis/Resources/WebChat/bootstrap.js b/apps/macos/Sources/Clawdis/Resources/WebChat/bootstrap.js
index 6bf2a3abe..730ff1720 100644
--- a/apps/macos/Sources/Clawdis/Resources/WebChat/bootstrap.js
+++ b/apps/macos/Sources/Clawdis/Resources/WebChat/bootstrap.js
@@ -18,6 +18,28 @@ const logStatus = (msg) => {
   }
 };
 
+// Keep the WebChat UI in lockstep with the host system theme.
+const setupSystemThemeSync = () => {
+  const mql = window.matchMedia?.("(prefers-color-scheme: dark)");
+  if (!mql) return;
+
+  const apply = (isDark) => {
+    document.documentElement.classList.toggle("dark", isDark);
+    document.body?.classList.toggle("dark", isDark);
+  };
+
+  // Set initial theme immediately.
+  apply(mql.matches);
+
+  // React to live theme switches (e.g., macOS Light <-> Dark).
+  const onChange = (event) => apply(event.matches);
+  if (mql.addEventListener) {
+    mql.addEventListener("change", onChange);
+  } else {
+    mql.addListener(onChange); // Safari < 14 fallback
+  }
+};
+
 async function fetchBootstrap() {
   const params = new URLSearchParams(window.location.search);
   const sessionKey = params.get("session") || "main";
@@ -115,6 +137,9 @@ const startChat = async () => {
   const { initialMessages, sessionKey, thinkingLevel } = await fetchBootstrap();
 
   logStatus("boot: starting imports");
+  // Align UI theme with host OS preference and keep it updated.
+  setupSystemThemeSync();
+
   const { Agent } = await import("./agent/agent.js");
   const { ChatPanel } = await import("./ChatPanel.js");
   const { AppStorage, setAppStorage } = await import("./storage/app-storage.js");