fix hydration error (#3542)

reflex-dev · Jun 21, 2024 · 046dbde · 046dbde
1 parent 1a74ff4
commit 046dbde
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 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
@@ -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
@@ -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
@@ -25,7 +25,13 @@
 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 @@ def create(cls, *children, **props):
         """
         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
@@ -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