feat: resolve theme toggle hydration mismatch

Author: puneetnith28

packages/react/src/html/ui/components/ThemeToggle.jsx

@@ -10,7 +10,11 @@ const Toggle = () => {
   const [themePreference, setThemePreference] = useTheme();
 
   return (
-    <ThemeToggle onChange={setThemePreference} currentTheme={themePreference} />
+    <ThemeToggle
+      onChange={setThemePreference}
+      currentTheme={themePreference}
+      key={themePreference}
+    />
   );
 };
 

packages/react/src/html/ui/hooks/useTheme.mjs

@@ -29,10 +29,14 @@ const applySystemTheme = () => applyTheme('system');
  * @returns {['system'|'light'|'dark', (next: 'system'|'light'|'dark') => void]}
  */
 export const useTheme = () => {
-  // Read stored preference once on mount; default to 'system'.
-  const [pref, setPref] = useState(() =>
-    server ? 'system' : (localStorage.getItem('theme') ?? 'system')
-  );
+  const [pref, setPref] = useState('system');
+
+  useEffect(() => {
+    const stored = localStorage.getItem('theme');
+    if (stored) {
+      setPref(stored);
+    }
+  }, []);
 
   // Apply theme on every preference change, and if 'system',
   // also listen for OS-level color scheme changes.