feat: add light theme with storybook toggle

Author: kylecarbs

.storybook/preview.tsx

@@ -1,13 +1,50 @@
+import React, { useEffect } from "react";
 import type { Preview } from "@storybook/react-vite";
+import {
+  ThemeProvider,
+  useTheme,
+  type ThemeMode,
+} from "../src/browser/contexts/ThemeContext";
 import "../src/browser/styles/globals.css";
 
+const ThemeStorySync: React.FC<{ mode: ThemeMode }> = ({ mode }) => {
+  const { theme, setTheme } = useTheme();
+
+  useEffect(() => {
+    if (theme !== mode) {
+      setTheme(mode);
+    }
+  }, [mode, setTheme, theme]);
+
+  return null;
+};
+
 const preview: Preview = {
+  globalTypes: {
+    theme: {
+      name: "Theme",
+      description: "Choose between light and dark UI themes",
+      defaultValue: "dark",
+      toolbar: {
+        icon: "mirror",
+        items: [
+          { value: "dark", title: "Dark" },
+          { value: "light", title: "Light" },
+        ],
+        dynamicTitle: true,
+      },
+    },
+  },
   decorators: [
-    (Story) => (
-      <>
-        <Story />
-      </>
-    ),
+    (Story, context) => {
+      const mode = (context.globals.theme ?? "dark") as ThemeMode;
+      return (
+        <ThemeProvider>
+          <ThemeStorySync mode={mode} />
+          <Story />
+        </ThemeProvider>
+      );
+    },
   ],
   parameters: {
     controls: {
@@ -16,6 +53,12 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    chromatic: {
+      modes: {
+        dark: { globals: { theme: "dark" } },
+        light: { globals: { theme: "light" } },
+      },
+    },
   },
 };
 

bun.lock

@@ -30,6 +30,7 @@
         "ghostty-web": "^0.1.1",
         "jsonc-parser": "^3.3.1",
         "lru-cache": "^11.2.2",
+        "lucide-react": "^0.553.0",
         "markdown-it": "^14.1.0",
         "minimist": "^1.2.8",
         "motion": "^12.23.24",
@@ -2203,7 +2204,7 @@
 
     "lru-cache": ["lru-cache@11.2.2", "", {}, "sha512-F9ODfyqML2coTIsQpSkRHnLSZMtkU8Q+mSfcaIyKwy58u+8k5nvAYeiNhsyMARvzNcXJ9QfWVrcPsC9e9rAxtg=="],
 
-    "lucide-react": ["lucide-react@0.542.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-w3hD8/SQB7+lzU2r4VdFyzzOzKnUjTZIF/MQJGSSvni7Llewni4vuViRppfRAa2guOsY5k4jZyxw/i9DQHv+dw=="],
+    "lucide-react": ["lucide-react@0.553.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-BRgX5zrWmNy/lkVAe0dXBgd7XQdZ3HTf+Hwe3c9WK6dqgnj9h+hxV+MDncM88xDWlCq27+TKvHGE70ViODNILw=="],
 
     "lz-string": ["lz-string@1.5.0", "", { "bin": { "lz-string": "bin/bin.js" } }, "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ=="],
 
@@ -3551,6 +3552,8 @@
 
     "stack-utils/escape-string-regexp": ["escape-string-regexp@2.0.0", "", {}, "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w=="],
 
+    "streamdown/lucide-react": ["lucide-react@0.542.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-w3hD8/SQB7+lzU2r4VdFyzzOzKnUjTZIF/MQJGSSvni7Llewni4vuViRppfRAa2guOsY5k4jZyxw/i9DQHv+dw=="],
+
     "string-length/strip-ansi": ["strip-ansi@7.1.2", "", { "dependencies": { "ansi-regex": "^6.0.1" } }, "sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA=="],
 
     "tar-fs/chownr": ["chownr@1.1.4", "", {}, "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg=="],

index.html

@@ -16,13 +16,38 @@
         margin: 0;
         padding: 0;
         overflow: hidden;
-        background: #1e1e1e;
+        background: var(--color-background, #1e1e1e);
       }
       #root {
         height: 100vh;
         overflow: hidden;
       }
     </style>
+    <script>
+      (function () {
+        const THEME_KEY = "uiTheme";
+        try {
+          const stored = window.localStorage.getItem(THEME_KEY);
+          const parsed = stored ? JSON.parse(stored) : null;
+          const prefersLight = window.matchMedia
+            ? window.matchMedia("(prefers-color-scheme: light)").matches
+            : false;
+          const theme = parsed === "light" || parsed === "dark" ? parsed : prefersLight ? "light" : "dark";
+
+          document.documentElement.dataset.theme = theme;
+          document.documentElement.style.colorScheme = theme;
+
+          const metaThemeColor = document.querySelector('meta[name="theme-color"]');
+          if (metaThemeColor) {
+            metaThemeColor.setAttribute("content", theme === "light" ? "#f5f6f8" : "#1e1e1e");
+          }
+        } catch (error) {
+          console.warn("Failed to apply preferred theme early", error);
+          document.documentElement.dataset.theme = "dark";
+          document.documentElement.style.colorScheme = "dark";
+        }
+      })();
+    </script>
   </head>
   <body>
     <div id="root"></div>

package.json

@@ -46,8 +46,8 @@
   "dependencies": {
     "@ai-sdk/anthropic": "^2.0.44",
     "@ai-sdk/openai": "^2.0.66",
+    "@homebridge/node-pty-prebuilt-multiarch": "^0.11.14",
     "@openrouter/ai-sdk-provider": "^1.2.2",
-    "ghostty-web": "^0.1.1",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-scroll-area": "^1.2.10",
@@ -66,13 +66,14 @@
     "disposablestack": "^1.1.7",
     "electron-updater": "^6.6.2",
     "express": "^5.1.0",
+    "ghostty-web": "^0.1.1",
     "jsonc-parser": "^3.3.1",
     "lru-cache": "^11.2.2",
+    "lucide-react": "^0.553.0",
     "markdown-it": "^14.1.0",
     "minimist": "^1.2.8",
     "motion": "^12.23.24",
     "ollama-ai-provider-v2": "^1.5.4",
-    "@homebridge/node-pty-prebuilt-multiarch": "^0.11.14",
     "rehype-harden": "^1.1.5",
     "shescape": "^2.1.6",
     "source-map-support": "^0.5.21",

src/browser/App.tsx

@@ -21,6 +21,7 @@ import { useStableReference, compareMaps } from "./hooks/useStableReference";
 import { CommandRegistryProvider, useCommandRegistry } from "./contexts/CommandRegistryContext";
 import type { CommandAction } from "./contexts/CommandRegistryContext";
 import { ModeProvider } from "./contexts/ModeContext";
+import { ThemeProvider, useTheme, type ThemeMode } from "./contexts/ThemeContext";
 import { ThinkingProvider } from "./contexts/ThinkingContext";
 import { CommandPalette } from "./components/CommandPalette";
 import { buildCoreSources, type BuildSourcesParams } from "./utils/commands/sources";
@@ -48,6 +49,13 @@ function AppInner() {
     beginWorkspaceCreation,
     clearPendingWorkspaceCreation,
   } = useWorkspaceContext();
+  const { theme, setTheme, toggleTheme } = useTheme();
+  const setThemePreference = useCallback(
+    (nextTheme: ThemeMode) => {
+      setTheme(nextTheme);
+    },
+    [setTheme]
+  );
   const {
     projects,
     removeProject,
@@ -392,6 +400,7 @@ function AppInner() {
     projects,
     workspaceMetadata,
     selectedWorkspace,
+    theme,
     getThinkingLevel: getThinkingLevelForWorkspace,
     onSetThinkingLevel: setThinkingLevelFromPalette,
     onStartWorkspaceCreation: openNewWorkspaceFromPalette,
@@ -404,6 +413,8 @@ function AppInner() {
     onToggleSidebar: toggleSidebarFromPalette,
     onNavigateWorkspace: navigateWorkspaceFromPalette,
     onOpenWorkspaceInTerminal: openWorkspaceInTerminal,
+    onToggleTheme: toggleTheme,
+    onSetTheme: setThemePreference,
   };
 
   useEffect(() => {
@@ -586,7 +597,7 @@ function AppInner() {
               })()
             ) : (
               <div
-                className="[&_p]:text-muted mx-auto w-full max-w-3xl text-center [&_h2]:mb-4 [&_h2]:font-bold [&_h2]:tracking-tight [&_h2]:text-white [&_p]:leading-[1.6]"
+                className="[&_p]:text-muted mx-auto w-full max-w-3xl text-center [&_h2]:mb-4 [&_h2]:font-bold [&_h2]:tracking-tight [&_h2]:text-foreground [&_p]:leading-[1.6]"
                 style={{
                   padding: "clamp(40px, 10vh, 100px) 20px",
                   fontSize: "clamp(14px, 2vw, 16px)",
@@ -618,9 +629,11 @@ function AppInner() {
 
 function App() {
   return (
-    <CommandRegistryProvider>
-      <AppInner />
-    </CommandRegistryProvider>
+    <ThemeProvider>
+      <CommandRegistryProvider>
+        <AppInner />
+      </CommandRegistryProvider>
+    </ThemeProvider>
   );
 }
 

src/browser/components/ThemeToggleButton.tsx

@@ -0,0 +1,24 @@
+import { MoonStar, SunMedium } from "lucide-react";
+import { useTheme } from "@/browser/contexts/ThemeContext";
+import { TooltipWrapper, Tooltip } from "./Tooltip";
+
+export function ThemeToggleButton() {
+  const { theme, toggleTheme } = useTheme();
+  const label = theme === "light" ? "Switch to dark theme" : "Switch to light theme";
+  const Icon = theme === "light" ? MoonStar : SunMedium;
+
+  return (
+    <TooltipWrapper>
+      <button
+        type="button"
+        onClick={toggleTheme}
+        className="border-border-light text-muted-foreground hover:border-border-medium/80 hover:bg-toggle-bg/70 focus-visible:ring-1 focus-visible:ring-border-medium flex h-7 w-7 items-center justify-center rounded-md border bg-transparent transition-colors duration-150"
+        aria-label={label}
+        data-testid="theme-toggle"
+      >
+        <Icon className="h-4 w-4" aria-hidden />
+      </button>
+      <Tooltip align="right">{label}</Tooltip>
+    </TooltipWrapper>
+  );
+}

src/browser/components/TitleBar.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef } from "react";
 import { cn } from "@/common/lib/utils";
 import { VERSION } from "@/version";
+import { ThemeToggleButton } from "./ThemeToggleButton";
 import { TooltipWrapper, Tooltip } from "./Tooltip";
 import type { UpdateStatus } from "@/common/types/ipc";
 import { isTelemetryEnabled } from "@/common/telemetry";
@@ -251,10 +252,13 @@ export function TitleBar() {
           mux {gitDescribe ?? "(dev)"}
         </div>
       </div>
-      <TooltipWrapper>
-        <div className="cursor-default text-[11px] opacity-70">{buildDate}</div>
-        <Tooltip align="right">Built at {extendedTimestamp}</Tooltip>
-      </TooltipWrapper>
+      <div className="flex items-center gap-3">
+        <ThemeToggleButton />
+        <TooltipWrapper>
+          <div className="cursor-default text-[11px] opacity-70">{buildDate}</div>
+          <Tooltip align="right">Built at {extendedTimestamp}</Tooltip>
+        </TooltipWrapper>
+      </div>
     </div>
   );
 }

src/browser/contexts/ThemeContext.tsx

@@ -0,0 +1,85 @@
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useLayoutEffect,
+  useMemo,
+  type ReactNode,
+} from "react";
+import { usePersistedState } from "@/browser/hooks/usePersistedState";
+import { UI_THEME_KEY } from "@/common/constants/storage";
+
+export type ThemeMode = "light" | "dark";
+
+interface ThemeContextValue {
+  theme: ThemeMode;
+  setTheme: React.Dispatch<React.SetStateAction<ThemeMode>>;
+  toggleTheme: () => void;
+}
+
+const ThemeContext = createContext<ThemeContextValue | null>(null);
+
+const DARK_THEME_COLOR = "#1e1e1e";
+const LIGHT_THEME_COLOR = "#f5f6f8";
+
+function resolveSystemTheme(): ThemeMode {
+  if (typeof window === "undefined" || !window.matchMedia) {
+    return "dark";
+  }
+
+  return window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
+}
+
+function applyThemeToDocument(theme: ThemeMode) {
+  if (typeof document === "undefined") {
+    return;
+  }
+
+  const root = document.documentElement;
+  root.dataset.theme = theme;
+  root.style.colorScheme = theme;
+
+  const themeColor = theme === "light" ? LIGHT_THEME_COLOR : DARK_THEME_COLOR;
+  const meta = document.querySelector<HTMLMetaElement>('meta[name="theme-color"]');
+  if (meta) {
+    meta.setAttribute("content", themeColor);
+  }
+
+  const body = document.body;
+  if (body) {
+    body.style.backgroundColor = "var(--color-background)";
+  }
+}
+
+export function ThemeProvider(props: { children: ReactNode }) {
+  const [theme, setTheme] = usePersistedState<ThemeMode>(UI_THEME_KEY, resolveSystemTheme(), {
+    listener: true,
+  });
+
+  useLayoutEffect(() => {
+    applyThemeToDocument(theme);
+  }, [theme]);
+
+  const toggleTheme = useCallback(() => {
+    setTheme((current) => (current === "dark" ? "light" : "dark"));
+  }, [setTheme]);
+
+  const value = useMemo<ThemeContextValue>(
+    () => ({
+      theme,
+      setTheme,
+      toggleTheme,
+    }),
+    [setTheme, theme, toggleTheme]
+  );
+
+  return <ThemeContext.Provider value={value}>{props.children}</ThemeContext.Provider>;
+}
+
+export function useTheme(): ThemeContextValue {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+}