🤖 fix: simplify storybook theme sync

Author: ammar-agent

.storybook/preview.tsx

@@ -2,35 +2,24 @@ import React from "react";
 import type { Preview } from "@storybook/react-vite";
 import {
   ThemeProvider,
-  useTheme,
   type ThemeMode,
 } from "../src/browser/contexts/ThemeContext";
+import { UI_THEME_KEY } from "@/common/constants/storage";
 import "../src/browser/styles/globals.css";
 
-const ThemeToggle = () => {
-  const { theme, toggleTheme } = useTheme();
-  return (
-    <button
-      onClick={toggleTheme}
-      style={{
-        position: "fixed",
-        bottom: "1rem",
-        right: "1rem",
-        zIndex: 9999,
-        padding: "0.5rem 1rem",
-        background: theme === "dark" ? "#f5f6f8" : "#1e1e1e",
-        color: theme === "dark" ? "#1e1e1e" : "#f5f6f8",
-        border: "1px solid #777",
-        borderRadius: "4px",
-        cursor: "pointer",
-        fontFamily: "system-ui, sans-serif",
-        fontSize: "12px",
-        boxShadow: "0 2px 5px rgba(0,0,0,0.2)",
-      }}
-    >
-      {theme === "dark" ? "☀️ Light" : "🌙 Dark"}
-    </button>
-  );
+const syncStorybookTheme = (mode?: ThemeMode) => {
+  if (typeof window === "undefined" || !mode) {
+    return;
+  }
+
+  try {
+    window.localStorage.setItem(UI_THEME_KEY, JSON.stringify(mode));
+    const root = document.documentElement;
+    root.dataset.theme = mode;
+    root.style.colorScheme = mode;
+  } catch (error) {
+    console.warn("Failed to sync Storybook theme:", error);
+  }
 };
 
 const preview: Preview = {
@@ -51,10 +40,10 @@ const preview: Preview = {
   decorators: [
     (Story, context) => {
       const mode = context.globals.theme as ThemeMode | undefined;
+      syncStorybookTheme(mode);
       return (
-        <ThemeProvider forcedTheme={mode}>
+        <ThemeProvider>
           <Story />
-          {!mode && <ThemeToggle />}
         </ThemeProvider>
       );
     },

src/browser/contexts/ThemeContext.tsx

@@ -51,42 +51,18 @@ 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(),
-    {
-      listener: true,
-    }
-  );
-
-  const theme = props.forcedTheme ?? parentContext?.theme ?? persistedTheme;
+export function ThemeProvider(props: { children: ReactNode }) {
+  const [theme, setTheme] = usePersistedState<ThemeMode>(UI_THEME_KEY, resolveSystemTheme(), {
+    listener: true,
+  });
 
   useLayoutEffect(() => {
     applyThemeToDocument(theme);
   }, [theme]);
 
-  const setTheme = useCallback(
-    (value: React.SetStateAction<ThemeMode>) => {
-      if (props.forcedTheme) return;
-      if (parentContext) {
-        parentContext.setTheme(value);
-        return;
-      }
-      setPersistedTheme(value);
-    },
-    [props.forcedTheme, parentContext, setPersistedTheme]
-  );
-
   const toggleTheme = useCallback(() => {
-    if (props.forcedTheme) return;
-    if (parentContext) {
-      parentContext.toggleTheme();
-      return;
-    }
-    setPersistedTheme((current) => (current === "dark" ? "light" : "dark"));
-  }, [props.forcedTheme, parentContext, setPersistedTheme]);
+    setTheme((current) => (current === "dark" ? "light" : "dark"));
+  }, [setTheme]);
 
   const value = useMemo<ThemeContextValue>(
     () => ({