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

@@ -34,6 +34,7 @@
         "ghostty-web": "next",
         "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",
@@ -2226,7 +2227,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=="],
 
@@ -3514,6 +3515,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=="],
 
     "string_decoder/safe-buffer": ["safe-buffer@5.1.2", "", {}, "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="],

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

@@ -74,6 +74,7 @@
     "ghostty-web": "next",
     "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",

src/browser/App.tsx

@@ -21,6 +21,7 @@ import { CommandRegistryProvider, useCommandRegistry } from "./contexts/CommandR
 import type { CommandAction } from "./contexts/CommandRegistryContext";
 import { ModeProvider } from "./contexts/ModeContext";
 import { ProviderOptionsProvider } from "./contexts/ProviderOptionsContext";
+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,
@@ -389,6 +397,7 @@ function AppInner() {
     projects,
     workspaceMetadata,
     selectedWorkspace,
+    theme,
     getThinkingLevel: getThinkingLevelForWorkspace,
     onSetThinkingLevel: setThinkingLevelFromPalette,
     onStartWorkspaceCreation: openNewWorkspaceFromPalette,
@@ -401,6 +410,8 @@ function AppInner() {
     onToggleSidebar: toggleSidebarFromPalette,
     onNavigateWorkspace: navigateWorkspaceFromPalette,
     onOpenWorkspaceInTerminal: openWorkspaceInTerminal,
+    onToggleTheme: toggleTheme,
+    onSetTheme: setThemePreference,
   };
 
   useEffect(() => {
@@ -587,7 +598,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)",
@@ -619,9 +630,11 @@ function AppInner() {
 
 function App() {
   return (
-    <CommandRegistryProvider>
-      <AppInner />
-    </CommandRegistryProvider>
+    <ThemeProvider>
+      <CommandRegistryProvider>
+        <AppInner />
+      </CommandRegistryProvider>
+    </ThemeProvider>
   );
 }
 

src/browser/components/Messages/MessageWindow.tsx

@@ -66,15 +66,15 @@ export const MessageWindow: React.FC<MessageWindowProps> = ({
       className={cn(
         "mt-4 mb-1 flex w-full flex-col relative isolate w-fit",
         variant === "user" && "ml-auto",
-        variant === "assistant" && "text-white",
+        variant === "assistant" && "text-foreground",
         isLastPartOfMessage && "mb-4"
       )}
       data-message-block
     >
       <div
         className={cn(
           variant === "user" &&
-            "bg-neutral-700/50 border border-user-border/20 rounded-lg px-3 py-2 overflow-hidden",
+            "bg-[var(--color-user-surface)] border border-[var(--color-user-border)] rounded-lg px-3 py-2 overflow-hidden shadow-sm",
           variant === "assistant" && "px-1 py-1"
         )}
       >
@@ -95,7 +95,7 @@ export const MessageWindow: React.FC<MessageWindowProps> = ({
         <div
           className={cn(
             "mt-2 flex flex-wrap items-center justify-between gap-3 text-[11px]",
-            variant === "user" ? "ml-auto text-white/60" : "text-white/60"
+            variant === "user" ? "ml-auto text-muted" : "text-muted"
           )}
           data-message-meta
         >

src/browser/components/Modal.tsx

@@ -29,7 +29,7 @@ export const ModalContent: React.FC<
   <div
     className={cn(
       "bg-dark rounded-lg p-6 w-[90%] flex flex-col shadow-lg border border-border",
-      "[&_h2]:mt-0 [&_h2]:mb-2 [&_h2]:text-white",
+      "[&_h2]:mt-0 [&_h2]:mb-2 [&_h2]:text-foreground",
       maxHeight && "overflow-y-auto",
       className
     )}

src/browser/components/ModelSelector.tsx

@@ -236,8 +236,8 @@ export const ModelSelector = forwardRef<ModelSelectorRef, ModelSelectorProps>(
                   "text-[11px] font-monospace py-1.5 px-2.5 cursor-pointer transition-colors duration-100",
                   "first:rounded-t last:rounded-b",
                   index === highlightedIndex
-                    ? "text-white bg-hover"
-                    : "text-light bg-transparent hover:bg-hover hover:text-white"
+                    ? "text-foreground bg-hover"
+                    : "text-light bg-transparent hover:bg-hover hover:text-foreground"
                 )}
                 onClick={() => handleSelectModel(model)}
               >

src/browser/components/ProjectCreateModal.tsx

@@ -142,14 +142,14 @@ export const ProjectCreateModal: React.FC<ProjectCreateModalProps> = ({
             placeholder="/home/user/projects/my-project"
             autoFocus
             disabled={isCreating}
-            className="bg-modal-bg border-border-medium focus:border-accent placeholder:text-muted w-full flex-1 rounded border px-3 py-2 font-mono text-sm text-white focus:outline-none disabled:opacity-50"
+            className="bg-modal-bg border-border-medium focus:border-accent placeholder:text-muted w-full flex-1 rounded border px-3 py-2 font-mono text-sm text-foreground focus:outline-none disabled:opacity-50"
           />
           {(isDesktop || hasWebFsPicker) && (
             <button
               type="button"
               onClick={handleBrowseClick}
               disabled={isCreating}
-              className="bg-border-medium hover:bg-border-darker border-border-medium rounded border px-4 text-sm font-medium text-white transition-colors disabled:opacity-50"
+              className="bg-border-medium hover:bg-border-darker border-border-medium rounded border px-4 text-sm font-medium text-foreground transition-colors disabled:opacity-50"
             >
               Browse...
             </button>

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>
+  );
+}