🤖 fix: ThemeProvider should not use forcedTheme as persistence default

Changed ThemeProvider to use resolveSystemTheme() as the default for
usePersistedState instead of forcedTheme. This prevents the issue where
usePersistedState would check localStorage first and ignore the default.

Now:
- persistedTheme uses system preference as default
- activeTheme = forcedTheme ?? persistedTheme (forcedTheme takes precedence)
- When Chromatic sets forcedTheme='light', it overrides persistence
- When forcedTheme is undefined (local dev), uses persistence/system

This ensures light mode stories render in light theme and dark mode
stories render in dark theme during Chromatic snapshots.

Author: ethanndickson

src/browser/contexts/ThemeContext.tsx

@@ -52,17 +52,19 @@ function applyThemeToDocument(theme: ThemeMode) {
 }
 
 export function ThemeProvider(props: { children: ReactNode; forcedTheme?: ThemeMode }) {
-  // When forcedTheme is provided, use it as the default to avoid flash of wrong theme
-  const [theme, setTheme] = usePersistedState<ThemeMode>(
+  // Only use persistence when theme is NOT forced
+  // When forcedTheme is provided (e.g., from Chromatic modes), bypass persistence entirely
+  const [persistedTheme, setPersistedTheme] = usePersistedState<ThemeMode>(
     UI_THEME_KEY,
-    props.forcedTheme ?? resolveSystemTheme(),
+    resolveSystemTheme(),
     {
       listener: !props.forcedTheme, // Disable listener when theme is forced (avoids conflicts)
     }
   );
 
-  // Use forcedTheme if provided (e.g., from Storybook), otherwise use persisted theme
-  const activeTheme = props.forcedTheme ?? theme;
+  // Use forcedTheme if provided, otherwise use persisted theme
+  // This ensures Chromatic modes (which set forcedTheme) are respected
+  const activeTheme = props.forcedTheme ?? persistedTheme;
 
   useLayoutEffect(() => {
     applyThemeToDocument(activeTheme);
@@ -71,17 +73,17 @@ export function ThemeProvider(props: { children: ReactNode; forcedTheme?: ThemeM
   const toggleTheme = useCallback(() => {
     // Only allow toggling when not forced
     if (!props.forcedTheme) {
-      setTheme((current) => (current === "dark" ? "light" : "dark"));
+      setPersistedTheme((current) => (current === "dark" ? "light" : "dark"));
     }
-  }, [props.forcedTheme, setTheme]);
+  }, [props.forcedTheme, setPersistedTheme]);
 
   const value = useMemo<ThemeContextValue>(
     () => ({
       theme: activeTheme,
-      setTheme,
+      setTheme: setPersistedTheme,
       toggleTheme,
     }),
-    [activeTheme, setTheme, toggleTheme]
+    [activeTheme, setPersistedTheme, toggleTheme]
   );
 
   return <ThemeContext.Provider value={value}>{props.children}</ThemeContext.Provider>;