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/Context1MCheckbox.tsx

@@ -17,7 +17,7 @@ export const Context1MCheckbox: React.FC<Context1MCheckboxProps> = ({ modelStrin
 
   return (
     <div className="flex items-center gap-1.5">
-      <label className="text-foreground flex cursor-pointer items-center gap-1 truncate text-[10px] select-none hover:text-white">
+      <label className="text-foreground flex cursor-pointer items-center gap-1 truncate text-[10px] select-none hover:text-foreground">
         <input type="checkbox" checked={use1M} onChange={(e) => setUse1M(e.target.checked)} />
         1M
       </label>

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

@@ -107,7 +107,7 @@ 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 mb-5 w-full 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 mb-5 w-full rounded border px-3 py-2 font-mono text-sm text-foreground focus:outline-none disabled:opacity-50"
       />
       {error && <div className="text-error -mt-3 mb-3 text-xs">{error}</div>}
       <ModalActions>