🤖 fix: propagate parent theme in ThemeProvider to support nesting

Author: ammar-agent

src/browser/contexts/ThemeContext.tsx

@@ -52,6 +52,7 @@ function applyThemeToDocument(theme: ThemeMode) {
 }
 
 export function ThemeProvider(props: { children: ReactNode; forcedTheme?: ThemeMode }) {
+  const parentContext = useContext(ThemeContext);
   const [persistedTheme, setPersistedTheme] = usePersistedState<ThemeMode>(
     UI_THEME_KEY,
     resolveSystemTheme(),
@@ -60,7 +61,7 @@ export function ThemeProvider(props: { children: ReactNode; forcedTheme?: ThemeM
     }
   );
 
-  const theme = props.forcedTheme ?? persistedTheme;
+  const theme = props.forcedTheme ?? parentContext?.theme ?? persistedTheme;
 
   useLayoutEffect(() => {
     applyThemeToDocument(theme);
@@ -69,15 +70,23 @@ export function ThemeProvider(props: { children: ReactNode; forcedTheme?: ThemeM
   const setTheme = useCallback(
     (value: React.SetStateAction<ThemeMode>) => {
       if (props.forcedTheme) return;
+      if (parentContext) {
+        parentContext.setTheme(value);
+        return;
+      }
       setPersistedTheme(value);
     },
-    [props.forcedTheme, setPersistedTheme]
+    [props.forcedTheme, parentContext, setPersistedTheme]
   );
 
   const toggleTheme = useCallback(() => {
     if (props.forcedTheme) return;
+    if (parentContext) {
+      parentContext.toggleTheme();
+      return;
+    }
     setPersistedTheme((current) => (current === "dark" ? "light" : "dark"));
-  }, [props.forcedTheme, setPersistedTheme]);
+  }, [props.forcedTheme, parentContext, setPersistedTheme]);
 
   const value = useMemo<ThemeContextValue>(
     () => ({