From 8ea7c65994a5255d487071585c41d531388fdc11 Mon Sep 17 00:00:00 2001
From: puneetnith28 <puneetnith28@gmail.com>
Date: Wed, 16 Sep 2026 02:37:21 +0530
Subject: [PATCH 1/3] feat: resolve theme toggle hydration mismatch

---
 .../react/src/html/ui/components/ThemeToggle.jsx     |  6 +++++-
 packages/react/src/html/ui/hooks/useTheme.mjs        | 12 ++++++++----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/html/ui/components/ThemeToggle.jsx b/packages/react/src/html/ui/components/ThemeToggle.jsx
index 2e9737557..90a1c4eec 100644
--- a/packages/react/src/html/ui/components/ThemeToggle.jsx
+++ b/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}
+    />
   );
 };
 
diff --git a/packages/react/src/html/ui/hooks/useTheme.mjs b/packages/react/src/html/ui/hooks/useTheme.mjs
index 3ed562d16..b717e33b6 100644
--- a/packages/react/src/html/ui/hooks/useTheme.mjs
+++ b/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.

From fcbd764b66704e635c788615834058bb8eed1f67 Mon Sep 17 00:00:00 2001
From: puneetnith28 <puneetnith28@gmail.com>
Date: Wed, 16 Sep 2026 09:43:19 +0530
Subject: [PATCH 2/3] fix(react): validate stored theme preference on mount

---
 packages/react/src/html/ui/hooks/useTheme.mjs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/html/ui/hooks/useTheme.mjs b/packages/react/src/html/ui/hooks/useTheme.mjs
index b717e33b6..f7ee009a8 100644
--- a/packages/react/src/html/ui/hooks/useTheme.mjs
+++ b/packages/react/src/html/ui/hooks/useTheme.mjs
@@ -33,7 +33,7 @@ export const useTheme = () => {
 
   useEffect(() => {
     const stored = localStorage.getItem('theme');
-    if (stored) {
+    if (stored === 'light' || stored === 'dark') {
       setPref(stored);
     }
   }, []);

From e12d85a3a0f5b22f96a14781015ebacc6a1fc788 Mon Sep 17 00:00:00 2001
From: puneetnith28 <puneetnith28@gmail.com>
Date: Wed, 16 Sep 2026 16:18:23 +0530
Subject: [PATCH 3/3] refactor: remove redundant key from ThemeToggle

---
 packages/react/src/html/ui/components/ThemeToggle.jsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/react/src/html/ui/components/ThemeToggle.jsx b/packages/react/src/html/ui/components/ThemeToggle.jsx
index 90a1c4eec..2e9737557 100644
--- a/packages/react/src/html/ui/components/ThemeToggle.jsx
+++ b/packages/react/src/html/ui/components/ThemeToggle.jsx
@@ -10,11 +10,7 @@ const Toggle = () => {
   const [themePreference, setThemePreference] = useTheme();
 
   return (
-    <ThemeToggle
-      onChange={setThemePreference}
-      currentTheme={themePreference}
-      key={themePreference}
-    />
+    <ThemeToggle onChange={setThemePreference} currentTheme={themePreference} />
   );
 };