feat(web): add light/dark theme toggle

fezzzza · fezzzza · commit 907ee1591d27 · 2026-05-17T21:58:10.000+01:00
Adds a theme switcher to the Web UI with light and dark mode support.
Defaults to dark (preserving existing appearance). User preference is
persisted in localStorage and applied before React hydrates to prevent
flash of wrong theme.

Changes:
- index.css: Add :root:not(.dark) light theme variables, rename :root
  to :root.dark for dark theme
- index.html: Add inline script to read localStorage and set .dark
  class before first paint (flash prevention)
- useTheme.ts: New hook that toggles .dark class on &lt;html&gt; and
  persists to localStorage
- TopNav.tsx: Add Sun/Moon toggle button next to version number
diff --git a/packages/web/index.html b/packages/web/index.html
@@ -12,12 +12,27 @@
       rel="stylesheet"
     />
     <style>
-      body {
+      /* Prevent flash: apply theme before React hydrates */
+      html:not(.dark) body {
+        background-color: #f9f9fb;
+      }
+      html.dark body {
         background-color: #0f1117;
       }
     </style>
   </head>
   <body>
+    <script>
+      // Apply saved theme before React renders to prevent flash
+      (function () {
+        var theme = localStorage.getItem('archon-theme');
+        if (theme === 'light') {
+          document.documentElement.classList.remove('dark');
+        } else {
+          document.documentElement.classList.add('dark');
+        }
+      })();
+    </script>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
diff --git a/packages/web/src/components/layout/TopNav.tsx b/packages/web/src/components/layout/TopNav.tsx
@@ -1,8 +1,9 @@
 import { NavLink, Link } from 'react-router';
 import { useQuery } from '@tanstack/react-query';
-import { LayoutDashboard, MessageSquare, Workflow, Settings } from 'lucide-react';
+import { LayoutDashboard, MessageSquare, Workflow, Settings, Sun, Moon } from 'lucide-react';
 import { listDashboardRuns, getUpdateCheck } from '@/lib/api';
 import { cn } from '@/lib/utils';
+import { useTheme } from '@/hooks/useTheme';
 
 const tabs = [
   { to: '/chat', end: false, icon: MessageSquare, label: 'Chat' },
@@ -12,6 +13,7 @@ const tabs = [
 ] as const;
 
 export function TopNav(): React.ReactElement {
+  const { theme, toggleTheme } = useTheme();
   // We only need `counts.running` — a server-side aggregate independent of
   // the `runs` array. `limit: 1` minimises the `runs` payload that the API
   // returns alongside the counts (we discard it).
@@ -66,7 +68,15 @@ export function TopNav(): React.ReactElement {
           )}
         </NavLink>
       ))}
-      <span className="ml-auto text-xs text-text-secondary">
+      <span className="ml-auto flex items-center gap-3 text-xs text-text-secondary">
+        <button
+          onClick={toggleTheme}
+          className="rounded-md p-1.5 text-text-secondary hover:text-text-primary hover:bg-surface-hover transition-colors"
+          title={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
+          aria-label={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
+        >
+          {theme === 'dark' ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
+        </button>
         v{import.meta.env.VITE_APP_VERSION as string}
         {updateCheck?.updateAvailable && updateCheck.releaseUrl && (
           <a
diff --git a/packages/web/src/hooks/useTheme.ts b/packages/web/src/hooks/useTheme.ts
@@ -0,0 +1,32 @@
+import { useState, useEffect, useCallback } from 'react';
+
+type Theme = 'light' | 'dark';
+
+const STORAGE_KEY = 'archon-theme';
+
+function getInitialTheme(): Theme {
+  if (typeof window === 'undefined') return 'dark';
+  const stored = localStorage.getItem(STORAGE_KEY);
+  if (stored === 'light' || stored === 'dark') return stored;
+  return 'dark';
+}
+
+export function useTheme(): { theme: Theme; toggleTheme: () => void } {
+  const [theme, setTheme] = useState<Theme>(getInitialTheme);
+
+  useEffect(() => {
+    const root = document.documentElement;
+    if (theme === 'dark') {
+      root.classList.add('dark');
+    } else {
+      root.classList.remove('dark');
+    }
+    localStorage.setItem(STORAGE_KEY, theme);
+  }, [theme]);
+
+  const toggleTheme = useCallback(() => {
+    setTheme(prev => (prev === 'dark' ? 'light' : 'dark'));
+  }, []);
+
+  return { theme, toggleTheme };
+}
diff --git a/packages/web/src/index.css b/packages/web/src/index.css
@@ -6,8 +6,66 @@
 
 @custom-variant dark (&:is(.dark *));
 
-/* Dark-only theme - uses our custom palette as root defaults */
-:root {
+/* Light theme (default when no .dark class) */
+:root:not(.dark) {
+  /* App-specific colors */
+  --surface: oklch(0.97 0.005 260);
+  --surface-elevated: oklch(1 0 0);
+  --border-bright: oklch(0.78 0.005 260);
+  --text-primary: oklch(0.15 0.01 260);
+  --text-secondary: oklch(0.42 0.01 260);
+  --text-tertiary: oklch(0.6 0.01 260);
+  --accent-hover: oklch(0.52 0.18 250);
+  --accent-muted: oklch(0.88 0.06 250);
+  --surface-inset: oklch(0.93 0.005 260);
+  --surface-hover: oklch(0.94 0.005 260);
+  --accent-bright: oklch(0.45 0.18 250);
+  --success: oklch(0.45 0.17 155);
+  --warning: oklch(0.55 0.18 75);
+  --error: oklch(0.5 0.2 25);
+
+  /* Node type colors */
+  --node-command: oklch(0.45 0.18 250);
+  --node-prompt: oklch(0.42 0.19 290);
+  --node-bash: oklch(0.55 0.18 75);
+
+  /* shadcn variables mapped to light theme */
+  --radius: 0.625rem;
+  --background: oklch(0.985 0.002 260);
+  --foreground: oklch(0.15 0.01 260);
+  --card: oklch(0.97 0.005 260);
+  --card-foreground: oklch(0.15 0.01 260);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.15 0.01 260);
+  --primary: oklch(0.45 0.18 250);
+  --primary-foreground: oklch(0.98 0.005 260);
+  --secondary: oklch(0.94 0.005 260);
+  --secondary-foreground: oklch(0.15 0.01 260);
+  --muted: oklch(0.94 0.005 260);
+  --muted-foreground: oklch(0.42 0.01 260);
+  --accent: oklch(0.92 0.03 250);
+  --accent-foreground: oklch(0.15 0.01 260);
+  --destructive: oklch(0.5 0.2 25);
+  --border: oklch(0.88 0.005 260);
+  --input: oklch(0.88 0.005 260);
+  --ring: oklch(0.45 0.18 250);
+  --chart-1: oklch(0.45 0.18 250);
+  --chart-2: oklch(0.45 0.17 155);
+  --chart-3: oklch(0.55 0.18 75);
+  --chart-4: oklch(0.5 0.2 25);
+  --chart-5: oklch(0.42 0.18 250);
+  --sidebar: oklch(0.97 0.005 260);
+  --sidebar-foreground: oklch(0.15 0.01 260);
+  --sidebar-primary: oklch(0.45 0.18 250);
+  --sidebar-primary-foreground: oklch(0.98 0.005 260);
+  --sidebar-accent: oklch(0.92 0.03 250);
+  --sidebar-accent-foreground: oklch(0.15 0.01 260);
+  --sidebar-border: oklch(0.88 0.005 260);
+  --sidebar-ring: oklch(0.45 0.18 250);
+}
+
+/* Dark theme */
+:root.dark {
   /* App-specific colors */
   --surface: oklch(0.18 0.008 260);
   --surface-elevated: oklch(0.22 0.01 260);
@@ -146,7 +204,7 @@ body {
   font-family: var(--font-sans);
 }
 
-/* Scrollbar styling for dark theme */
+/* Scrollbar styling */
 ::-webkit-scrollbar {
   width: 8px;
   height: 8px;
