🤖 fix(storybook): add forcedTheme prop to respect Chromatic mode variants

Added a `forcedTheme` prop to ThemeProvider that overrides the
persisted localStorage theme. This ensures Chromatic's mode variants
(dark/light) are correctly applied during visual snapshots.

Without this, ThemeProvider would read from localStorage and ignore
the mode set by Chromatic, causing all snapshots to appear in the
same theme (the persisted one).

Changes:
- ThemeProvider now accepts optional `forcedTheme` prop
- Storybook decorator passes `context.globals.theme` as forcedTheme
- When forcedTheme is set, it overrides the persisted theme
- When forcedTheme is undefined (local dev), uses normal persistence

This restores the original PR intent where Chromatic's dark/light
modes produce correctly themed snapshots.

Author: ethanndickson

.storybook/preview.tsx

@@ -64,7 +64,7 @@ const preview: Preview = {
       const mode = context.globals.theme as ThemeMode | undefined;
       syncStorybookTheme(mode);
       return (
-        <ThemeProvider>
+        <ThemeProvider forcedTheme={mode}>
           <Story />
         </ThemeProvider>
       );

src/browser/contexts/ThemeContext.tsx

@@ -51,26 +51,29 @@ function applyThemeToDocument(theme: ThemeMode) {
   }
 }
 
-export function ThemeProvider(props: { children: ReactNode }) {
+export function ThemeProvider(props: { children: ReactNode; forcedTheme?: ThemeMode }) {
   const [theme, setTheme] = usePersistedState<ThemeMode>(UI_THEME_KEY, resolveSystemTheme(), {
     listener: true,
   });
 
+  // Use forcedTheme if provided (e.g., from Storybook), otherwise use persisted theme
+  const activeTheme = props.forcedTheme ?? theme;
+
   useLayoutEffect(() => {
-    applyThemeToDocument(theme);
-  }, [theme]);
+    applyThemeToDocument(activeTheme);
+  }, [activeTheme]);
 
   const toggleTheme = useCallback(() => {
     setTheme((current) => (current === "dark" ? "light" : "dark"));
   }, [setTheme]);
 
   const value = useMemo<ThemeContextValue>(
     () => ({
-      theme,
+      theme: activeTheme,
       setTheme,
       toggleTheme,
     }),
-    [setTheme, theme, toggleTheme]
+    [activeTheme, setTheme, toggleTheme]
   );
 
   return <ThemeContext.Provider value={value}>{props.children}</ThemeContext.Provider>;