refactor: simplify ThemeContext API - revert setThemePreference to setTheme

- ThemeMode now includes 'system' (user's selection)
- ResolvedThemeMode for the actual applied theme (never 'system')
- setTheme/theme for the user's preference
- resolvedTheme for places that need the actual applied theme
- Net LoC reduction (-36 lines)

Author: ibetitsmike

.storybook/preview.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import type { Preview } from "@storybook/react-vite";
-import { ThemeProvider, type ThemeMode } from "../src/browser/contexts/ThemeContext";
+import { ThemeProvider, type ResolvedThemeMode } from "../src/browser/contexts/ThemeContext";
 import "../src/browser/styles/globals.css";
 import {
   TUTORIAL_STATE_KEY,
@@ -9,7 +9,6 @@ import {
 } from "../src/common/constants/storage";
 import { NOW } from "../src/browser/stories/mockFactory";
 
-
 const STORYBOOK_FONTS_READY_TIMEOUT_MS = 2500;
 
 let fontsReadyPromise: Promise<void> | null = null;
@@ -92,7 +91,7 @@ const preview: Preview = {
     // Theme provider
     (Story, context) => {
       // Default to dark if mode not set (e.g., Chromatic headless browser defaults to light)
-      const mode = (context.globals.theme as ThemeMode | undefined) ?? "dark";
+      const mode = (context.globals.theme as ResolvedThemeMode | undefined) ?? "dark";
 
       // Apply theme synchronously before React renders - critical for Chromatic snapshots
       if (typeof document !== "undefined") {

src/browser/App.tsx

@@ -76,7 +76,7 @@ function AppInner() {
     pendingNewWorkspaceSectionId,
     beginWorkspaceCreation,
   } = useWorkspaceContext();
-  const { themePreference, setThemePreference, toggleTheme } = useTheme();
+  const { theme, setTheme, toggleTheme } = useTheme();
   const { open: openSettings } = useSettings();
   const { api, status, error, authenticate } = useAPI();
 
@@ -432,7 +432,7 @@ function AppInner() {
     projects,
     workspaceMetadata,
     selectedWorkspace,
-    themePreference,
+    theme,
     getThinkingLevel: getThinkingLevelForWorkspace,
     onSetThinkingLevel: setThinkingLevelFromPalette,
     onStartWorkspaceCreation: openNewWorkspaceFromPalette,
@@ -451,7 +451,7 @@ function AppInner() {
       });
     },
     onToggleTheme: toggleTheme,
-    onSetThemePreference: setThemePreference,
+    onSetTheme: setTheme,
     onOpenSettings: openSettings,
     onClearTimingStats: (workspaceId: string) => workspaceStore.clearTimingStats(workspaceId),
     api,

src/browser/components/Settings/sections/GeneralSection.tsx

@@ -1,9 +1,5 @@
 import React, { useEffect, useState, useCallback } from "react";
-import {
-  useTheme,
-  THEME_PREFERENCE_OPTIONS,
-  type ThemePreference,
-} from "@/browser/contexts/ThemeContext";
+import { useTheme, THEME_OPTIONS, type ThemeMode } from "@/browser/contexts/ThemeContext";
 import {
   Select,
   SelectContent,
@@ -32,7 +28,7 @@ const EDITOR_OPTIONS: Array<{ value: EditorType; label: string }> = [
 const isBrowserMode = typeof window !== "undefined" && !window.api;
 
 export function GeneralSection() {
-  const { themePreference, setThemePreference } = useTheme();
+  const { theme, setTheme } = useTheme();
   const { api } = useAPI();
   const [editorConfig, setEditorConfig] = usePersistedState<EditorConfig>(
     EDITOR_CONFIG_KEY,
@@ -77,15 +73,12 @@ export function GeneralSection() {
             <div className="text-foreground text-sm">Theme</div>
             <div className="text-muted text-xs">Choose your preferred theme</div>
           </div>
-          <Select
-            value={themePreference}
-            onValueChange={(value) => setThemePreference(value as ThemePreference)}
-          >
+          <Select value={theme} onValueChange={(value) => setTheme(value as ThemeMode)}>
             <SelectTrigger className="border-border-medium bg-background-secondary hover:bg-hover h-9 w-auto cursor-pointer rounded-md border px-3 text-sm transition-colors">
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
-              {THEME_PREFERENCE_OPTIONS.map((option) => (
+              {THEME_OPTIONS.map((option) => (
                 <SelectItem key={option.value} value={option.value}>
                   {option.label}
                 </SelectItem>

src/browser/components/ThemeSelector.tsx

@@ -1,8 +1,4 @@
-import {
-  useTheme,
-  THEME_PREFERENCE_OPTIONS,
-  type ThemePreference,
-} from "@/browser/contexts/ThemeContext";
+import { useTheme, THEME_OPTIONS, type ThemeMode } from "@/browser/contexts/ThemeContext";
 import { Tooltip, TooltipTrigger, TooltipContent } from "./ui/tooltip";
 import {
   Select,
@@ -13,17 +9,13 @@ import {
 } from "@/browser/components/ui/select";
 
 export function ThemeSelector() {
-  const { themePreference, setThemePreference } = useTheme();
-  const currentLabel =
-    THEME_PREFERENCE_OPTIONS.find((t) => t.value === themePreference)?.label ?? themePreference;
+  const { theme, setTheme } = useTheme();
+  const currentLabel = THEME_OPTIONS.find((t) => t.value === theme)?.label ?? theme;
 
   return (
     <Tooltip>
       <TooltipTrigger asChild>
-        <Select
-          value={themePreference}
-          onValueChange={(value) => setThemePreference(value as ThemePreference)}
-        >
+        <Select value={theme} onValueChange={(value) => setTheme(value as ThemeMode)}>
           <SelectTrigger
             className="border-border-light text-muted-foreground hover:border-border-medium/80 hover:bg-toggle-bg/70 h-5 w-auto cursor-pointer border bg-transparent px-1.5 text-[11px] transition-colors duration-150"
             aria-label="Select theme"
@@ -32,7 +24,7 @@ export function ThemeSelector() {
             <SelectValue />
           </SelectTrigger>
           <SelectContent>
-            {THEME_PREFERENCE_OPTIONS.map((option) => (
+            {THEME_OPTIONS.map((option) => (
               <SelectItem key={option.value} value={option.value}>
                 {option.label}
               </SelectItem>

src/browser/components/ThemeToggleButton.tsx

@@ -3,8 +3,8 @@ import { useTheme } from "@/browser/contexts/ThemeContext";
 import { Tooltip, TooltipTrigger, TooltipContent } from "./ui/tooltip";
 
 export function ThemeToggleButton() {
-  const { theme, toggleTheme } = useTheme();
-  const isLightTheme = theme === "light" || theme === "flexoki-light";
+  const { resolvedTheme, toggleTheme } = useTheme();
+  const isLightTheme = resolvedTheme === "light" || resolvedTheme === "flexoki-light";
   const label = isLightTheme ? "Switch to dark theme" : "Switch to light theme";
   const Icon = isLightTheme ? MoonStar : SunMedium;
 

src/browser/contexts/ThemeContext.test.tsx

@@ -18,13 +18,12 @@ import { UI_THEME_KEY } from "@/common/constants/storage";
 
 // Helper to access internals
 const TestComponent = () => {
-  const { theme, toggleTheme } = useTheme();
+  const { theme, resolvedTheme, toggleTheme } = useTheme();
   return (
     <div>
-      <span data-testid="theme-value">{theme}</span>
-      <button onClick={toggleTheme} data-testid="toggle-btn">
-        Toggle
-      </button>
+      <span data-testid="theme">{theme}</span>
+      <span data-testid="resolved">{resolvedTheme}</span>
+      <button onClick={toggleTheme}>Toggle</button>
     </div>
   );
 };
@@ -65,44 +64,26 @@ describe("ThemeContext", () => {
     }
   });
 
-  test("uses persisted state by default", () => {
+  test("defaults to system theme", () => {
     const { getByTestId } = render(
       <ThemeProvider>
         <TestComponent />
       </ThemeProvider>
     );
-    // If matchMedia matches is false (default mock), resolveSystemTheme returns 'dark' (since it checks prefers-color-scheme: light)
-    // resolveSystemTheme logic: window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark"
-    expect(getByTestId("theme-value").textContent).toBe("dark");
+    // Default is "system", which resolves to "dark" when matchMedia returns false for prefers-color-scheme: light
+    expect(getByTestId("theme").textContent).toBe("system");
+    expect(getByTestId("resolved").textContent).toBe("dark");
   });
 
-  test("respects forcedTheme prop", () => {
-    const { getByTestId, rerender } = render(
-      <ThemeProvider forcedTheme="light">
-        <TestComponent />
-      </ThemeProvider>
-    );
-    expect(getByTestId("theme-value").textContent).toBe("light");
-
-    rerender(
-      <ThemeProvider forcedTheme="dark">
-        <TestComponent />
-      </ThemeProvider>
-    );
-    expect(getByTestId("theme-value").textContent).toBe("dark");
-  });
-
-  test("forcedTheme overrides persisted state", () => {
+  test("forcedTheme overrides resolved theme without changing preference", () => {
     window.localStorage.setItem(UI_THEME_KEY, JSON.stringify("light"));
-
     const { getByTestId } = render(
       <ThemeProvider forcedTheme="dark">
         <TestComponent />
       </ThemeProvider>
     );
-    expect(getByTestId("theme-value").textContent).toBe("dark");
-
-    // Check that localStorage is still light (since forcedTheme doesn't write to storage by itself)
-    expect(JSON.parse(window.localStorage.getItem(UI_THEME_KEY)!)).toBe("light");
+    // Preference unchanged, but resolved theme is forced
+    expect(getByTestId("theme").textContent).toBe("light");
+    expect(getByTestId("resolved").textContent).toBe("dark");
   });
 });