From 046dbdef6389f6f06e4fb037844e3a540040459a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thomas=20Brand=C3=A9ho?= <thomas.brandeho@gmail.com>
Date: Fri, 21 Jun 2024 21:34:47 +0200
Subject: [PATCH] fix hydration error (#3542)

---
 .../components/reflex/chakra_color_mode_provider.js    |  3 ++-
 .../reflex/radix_themes_color_mode_provider.js         |  2 +-
 reflex/components/radix/themes/color_mode.py           | 10 ++++++++--
 reflex/components/radix/themes/color_mode.pyi          |  8 +++++++-
 4 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/reflex/.templates/web/components/reflex/chakra_color_mode_provider.js b/reflex/.templates/web/components/reflex/chakra_color_mode_provider.js
index 2fbec30ef..ad41d5134 100644
--- a/reflex/.templates/web/components/reflex/chakra_color_mode_provider.js
+++ b/reflex/.templates/web/components/reflex/chakra_color_mode_provider.js
@@ -6,12 +6,13 @@ import { ColorModeContext, defaultColorMode } from "/utils/context.js";
 export default function ChakraColorModeProvider({ children }) {
   const { theme, resolvedTheme, setTheme } = useTheme();
   const { colorMode, toggleColorMode } = chakraUseColorMode();
-  const [resolvedColorMode, setResolvedColorMode] = useState(theme);
+  const [resolvedColorMode, setResolvedColorMode] = useState(colorMode);
 
   useEffect(() => {
     if (colorMode != resolvedTheme) {
       toggleColorMode();
     }
+    setResolvedColorMode(resolvedTheme);
   }, [theme, resolvedTheme]);
 
   const rawColorMode = colorMode;
diff --git a/reflex/.templates/web/components/reflex/radix_themes_color_mode_provider.js b/reflex/.templates/web/components/reflex/radix_themes_color_mode_provider.js
index 434516358..1756c9101 100644
--- a/reflex/.templates/web/components/reflex/radix_themes_color_mode_provider.js
+++ b/reflex/.templates/web/components/reflex/radix_themes_color_mode_provider.js
@@ -5,7 +5,7 @@ import { ColorModeContext, defaultColorMode } from "/utils/context.js";
 export default function RadixThemesColorModeProvider({ children }) {
   const { theme, resolvedTheme, setTheme } = useTheme();
   const [rawColorMode, setRawColorMode] = useState(defaultColorMode);
-  const [resolvedColorMode, setResolvedColorMode] = useState(theme);
+  const [resolvedColorMode, setResolvedColorMode] = useState("dark");
 
   useEffect(() => {
     setRawColorMode(theme);
diff --git a/reflex/components/radix/themes/color_mode.py b/reflex/components/radix/themes/color_mode.py
index c42a4b1db..8243a822a 100644
--- a/reflex/components/radix/themes/color_mode.py
+++ b/reflex/components/radix/themes/color_mode.py
@@ -25,7 +25,13 @@ from reflex.components.core.cond import Cond, color_mode_cond, cond
 from reflex.components.lucide.icon import Icon
 from reflex.components.radix.themes.components.dropdown_menu import dropdown_menu
 from reflex.components.radix.themes.components.switch import Switch
-from reflex.style import LIGHT_COLOR_MODE, color_mode, set_color_mode, toggle_color_mode
+from reflex.style import (
+    LIGHT_COLOR_MODE,
+    color_mode,
+    resolved_color_mode,
+    set_color_mode,
+    toggle_color_mode,
+)
 from reflex.utils import console
 from reflex.vars import BaseVar, Var
 
@@ -183,7 +189,7 @@ class ColorModeSwitch(Switch):
         """
         return Switch.create(
             *children,
-            checked=color_mode != LIGHT_COLOR_MODE,
+            checked=resolved_color_mode != LIGHT_COLOR_MODE,
             on_change=toggle_color_mode,
             **props,
         )
diff --git a/reflex/components/radix/themes/color_mode.pyi b/reflex/components/radix/themes/color_mode.pyi
index 6e842edc4..ba577b23e 100644
--- a/reflex/components/radix/themes/color_mode.pyi
+++ b/reflex/components/radix/themes/color_mode.pyi
@@ -14,7 +14,13 @@ from reflex.components.core.cond import Cond, color_mode_cond, cond
 from reflex.components.lucide.icon import Icon
 from reflex.components.radix.themes.components.dropdown_menu import dropdown_menu
 from reflex.components.radix.themes.components.switch import Switch
-from reflex.style import LIGHT_COLOR_MODE, color_mode, set_color_mode, toggle_color_mode
+from reflex.style import (
+    LIGHT_COLOR_MODE,
+    color_mode,
+    resolved_color_mode,
+    set_color_mode,
+    toggle_color_mode,
+)
 from reflex.utils import console
 from reflex.vars import BaseVar, Var
 from .components.icon_button import IconButton