🤖 fix(storybook): use forcedTheme as initial value to prevent flash

When forcedTheme is provided (e.g., from Chromatic mode variants),
use it as the initial value for usePersistedState to ensure the
correct theme is applied on first render without flashing through
the default/persisted theme.

This ensures light mode stories render in light theme and dark mode
stories render in dark theme, rather than both appearing as dark.

Author: ethanndickson

src/browser/contexts/ThemeContext.tsx

@@ -52,9 +52,14 @@ function applyThemeToDocument(theme: ThemeMode) {
 }
 
 export function ThemeProvider(props: { children: ReactNode; forcedTheme?: ThemeMode }) {
-  const [theme, setTheme] = usePersistedState<ThemeMode>(UI_THEME_KEY, resolveSystemTheme(), {
-    listener: !props.forcedTheme, // Disable listener when theme is forced (avoids conflicts)
-  });
+  // When forcedTheme is provided, use it as the default to avoid flash of wrong theme
+  const [theme, setTheme] = usePersistedState<ThemeMode>(
+    UI_THEME_KEY,
+    props.forcedTheme ?? 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;