Refactor theme management to use useTheme hook and ThemeContext

- Create ThemeContext with useTheme hook for cleaner theme access
- Remove duplicate theme logic from App.tsx
- Simplify Storybook decorator to just apply data-theme attribute
- Components can now use useTheme() instead of reading document.documentElement
- Centralize all theme logic in one place

Author: kylecarbs

.storybook/preview.tsx

@@ -1,5 +1,4 @@
 import type { Preview } from "@storybook/react-vite";
-import { useEffect } from "react";
 import "../src/browser/styles/globals.css";
 
 const preview: Preview = {
@@ -22,14 +21,6 @@ const preview: Preview = {
     (Story, context) => {
       const theme = context.globals.theme || "dark";
 
-      useEffect(() => {
-        // Apply theme to document root
-        document.documentElement.dataset.theme = theme;
-        
-        // Also apply to body to ensure it persists
-        document.body.dataset.theme = theme;
-      }, [theme]);
-
       return (
         <div data-theme={theme} style={{ minHeight: "100vh", backgroundColor: "var(--color-background)", color: "var(--color-foreground)" }}>
           <Story />

src/browser/App.tsx

@@ -22,16 +22,18 @@ import { CommandRegistryProvider, useCommandRegistry } from "./contexts/CommandR
 import type { CommandAction } from "./contexts/CommandRegistryContext";
 import { ModeProvider } from "./contexts/ModeContext";
 import { ThinkingProvider } from "./contexts/ThinkingContext";
+import { ThemeProvider } from "./contexts/ThemeContext";
 import { CommandPalette } from "./components/CommandPalette";
 import { buildCoreSources, type BuildSourcesParams } from "./utils/commands/sources";
 
 import type { ThinkingLevel } from "@/common/types/thinking";
 import { CUSTOM_EVENTS } from "@/common/constants/events";
 import { isWorkspaceForkSwitchEvent } from "./utils/workspaceFork";
-import { getThinkingLevelKey, THEME_KEY } from "@/common/constants/storage";
+import { getThinkingLevelKey } from "@/common/constants/storage";
 import type { BranchListResult } from "@/common/types/ipc";
 import { useTelemetry } from "./hooks/useTelemetry";
 import { useStartWorkspaceCreation, getFirstProjectPath } from "./hooks/useStartWorkspaceCreation";
+import { useTheme } from "./contexts/ThemeContext";
 
 const THINKING_LEVELS: ThinkingLevel[] = ["off", "low", "medium", "high"];
 
@@ -62,12 +64,7 @@ function AppInner() {
   const [sidebarCollapsed, setSidebarCollapsed] = usePersistedState("sidebarCollapsed", isMobile);
 
   // Theme state (global, not workspace-specific)
-  const [theme, setTheme] = usePersistedState<"light" | "dark">(THEME_KEY, "dark");
-
-  // Apply theme to document root
-  useEffect(() => {
-    document.documentElement.dataset.theme = theme;
-  }, [theme]);
+  const { toggleTheme } = useTheme();
 
   const defaultProjectPath = getFirstProjectPath(projects);
   const creationChatInputRef = useRef<ChatInputAPI | null>(null);
@@ -390,10 +387,6 @@ function AppInner() {
     setSidebarCollapsed((prev) => !prev);
   }, [setSidebarCollapsed]);
 
-  const toggleThemeFromPalette = useCallback(() => {
-    setTheme((prev) => (prev === "dark" ? "light" : "dark"));
-  }, [setTheme]);
-
   const navigateWorkspaceFromPalette = useCallback(
     (dir: "next" | "prev") => {
       handleNavigateWorkspace(dir);
@@ -415,7 +408,7 @@ function AppInner() {
     onAddProject: addProjectFromPalette,
     onRemoveProject: removeProjectFromPalette,
     onToggleSidebar: toggleSidebarFromPalette,
-    onToggleTheme: toggleThemeFromPalette,
+    onToggleTheme: toggleTheme,
     onNavigateWorkspace: navigateWorkspaceFromPalette,
     onOpenWorkspaceInTerminal: openWorkspaceInTerminal,
   };
@@ -632,9 +625,15 @@ function AppInner() {
 
 function App() {
   return (
-    <CommandRegistryProvider>
-      <AppInner />
-    </CommandRegistryProvider>
+    <ThemeProvider>
+      <CommandRegistryProvider>
+        <ModeProvider>
+          <ThinkingProvider>
+            <AppInner />
+          </ThinkingProvider>
+        </ModeProvider>
+      </CommandRegistryProvider>
+    </ThemeProvider>
   );
 }
 

src/browser/contexts/ThemeContext.tsx

@@ -0,0 +1,40 @@
+import { createContext, useContext, useEffect, type ReactNode } from "react";
+import { usePersistedState } from "../hooks/usePersistedState";
+import { THEME_KEY } from "@/common/constants/storage";
+
+type Theme = "light" | "dark";
+
+interface ThemeContextValue {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+  toggleTheme: () => void;
+}
+
+const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);
+
+export function ThemeProvider(props: { children: ReactNode }) {
+  const [theme, setTheme] = usePersistedState<Theme>(THEME_KEY, "dark");
+
+  // Apply theme to document root
+  useEffect(() => {
+    document.documentElement.dataset.theme = theme;
+  }, [theme]);
+
+  const toggleTheme = () => {
+    setTheme((prev) => (prev === "dark" ? "light" : "dark"));
+  };
+
+  return (
+    <ThemeContext.Provider value={{ theme, setTheme, toggleTheme }}>
+      {props.children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme(): ThemeContextValue {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within ThemeProvider");
+  }
+  return context;
+}

src/browser/utils/highlighting/shiki-shared.ts

@@ -5,6 +5,7 @@
 
 /**
  * Get the appropriate Shiki theme based on the current theme
+ * Falls back to reading from document if called outside React context
  */
 export function getShikiTheme(): "min-dark" | "min-light" {
   if (typeof document === "undefined") return "min-dark";