🤖 fix: prevent nested ThemeProvider from overriding forced theme

Root cause: When running in Storybook with Chromatic modes, the decorator
wraps stories in ThemeProvider with forcedTheme. But App.tsx also has its
own ThemeProvider without forcedTheme. The inner provider's useLayoutEffect
was overwriting the outer forced theme with the browser's prefers-color-scheme.

Solution: ThemeProvider now tracks whether it has a forced theme via isForced
context value. Nested providers check parentContext.isForced and defer to the
parent's theme when true, preventing the inner provider from overwriting.

Verified locally using Playwright:
- Browser prefers light + globals=theme:dark → correctly shows dark
- Browser prefers dark + globals=theme:light → correctly shows light
- Background colors correctly differ between themes

_Generated with `mux`_

Author: ammar-agent

src/browser/contexts/ThemeContext.tsx

@@ -15,6 +15,8 @@ interface ThemeContextValue {
   theme: ThemeMode;
   setTheme: React.Dispatch<React.SetStateAction<ThemeMode>>;
   toggleTheme: () => void;
+  /** True if this provider has a forcedTheme - nested providers should not override */
+  isForced: boolean;
 }
 
 const ThemeContext = createContext<ThemeContextValue | null>(null);
@@ -58,6 +60,10 @@ export function ThemeProvider({
   children: ReactNode;
   forcedTheme?: ThemeMode;
 }) {
+  // Check if we're nested inside a forced theme provider
+  const parentContext = useContext(ThemeContext);
+  const isNestedUnderForcedProvider = parentContext?.isForced ?? false;
+
   const [persistedTheme, setTheme] = usePersistedState<ThemeMode>(
     UI_THEME_KEY,
     resolveSystemTheme(),
@@ -66,23 +72,36 @@ export function ThemeProvider({
     }
   );
 
-  const theme = forcedTheme ?? persistedTheme;
+  // If nested under a forced provider, use parent's theme
+  // Otherwise, use forcedTheme (if provided) or persistedTheme
+  const theme =
+    isNestedUnderForcedProvider && parentContext
+      ? parentContext.theme
+      : (forcedTheme ?? persistedTheme);
+
+  const isForced = forcedTheme !== undefined || isNestedUnderForcedProvider;
 
+  // Only apply to document if we're the authoritative provider
   useLayoutEffect(() => {
-    applyThemeToDocument(theme);
-  }, [theme]);
+    if (!isNestedUnderForcedProvider) {
+      applyThemeToDocument(theme);
+    }
+  }, [theme, isNestedUnderForcedProvider]);
 
   const toggleTheme = useCallback(() => {
-    setTheme((current) => (current === "dark" ? "light" : "dark"));
-  }, [setTheme]);
+    if (!isNestedUnderForcedProvider) {
+      setTheme((current) => (current === "dark" ? "light" : "dark"));
+    }
+  }, [setTheme, isNestedUnderForcedProvider]);
 
   const value = useMemo<ThemeContextValue>(
     () => ({
       theme,
       setTheme,
       toggleTheme,
+      isForced,
     }),
-    [setTheme, theme, toggleTheme]
+    [setTheme, theme, toggleTheme, isForced]
   );
 
   return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;