diff --git a/reflex/.templates/web/utils/react-theme.js b/reflex/.templates/web/utils/react-theme.js index efb06cd0efb..e11f3ef2eff 100644 --- a/reflex/.templates/web/utils/react-theme.js +++ b/reflex/.templates/web/utils/react-theme.js @@ -18,17 +18,9 @@ const ThemeContext = createContext({ export function ThemeProvider({ children, defaultTheme = "system" }) { const [theme, setTheme] = useState(defaultTheme); - - // Detect system preference synchronously during initialization - const getInitialSystemTheme = () => { - if (defaultTheme !== "system") return defaultTheme; - if (typeof window === "undefined") return "light"; - return window.matchMedia("(prefers-color-scheme: dark)").matches - ? "dark" - : "light"; - }; - - const [systemTheme, setSystemTheme] = useState(getInitialSystemTheme); + const [systemTheme, setSystemTheme] = useState( + defaultTheme !== "system" ? defaultTheme : "light", + ); const [isInitialized, setIsInitialized] = useState(false); const firstRender = useRef(true); @@ -45,6 +37,7 @@ export function ThemeProvider({ children, defaultTheme = "system" }) { if (lastCompiledTheme !== defaultColorMode) { // on app startup, make sure the application color mode is persisted correctly. localStorage.setItem("last_compiled_theme", defaultColorMode); + setIsInitialized(true); return; } } @@ -78,19 +71,21 @@ export function ThemeProvider({ children, defaultTheme = "system" }) { }; }); - // Save theme to localStorage whenever it changes (but not on initial mount) + // Save theme to localStorage whenever it changes + // Skip saving only if theme key already exists and we haven't initialized yet useEffect(() => { - if (isInitialized) { - localStorage.setItem("theme", theme); - } - }, [theme, isInitialized]); + const existingTheme = localStorage.getItem("theme"); + if (!isInitialized && existingTheme !== null) return; + localStorage.setItem("theme", theme); + }, [theme]); useEffect(() => { + if (!isInitialized) return; const root = window.document.documentElement; root.classList.remove("light", "dark"); root.classList.add(resolvedTheme); root.style.colorScheme = resolvedTheme; - }, [resolvedTheme]); + }, [resolvedTheme, isInitialized]); return createElement( ThemeContext.Provider, diff --git a/reflex/constants/installer.py b/reflex/constants/installer.py index 1ba3b23cedd..01b2f1f4917 100644 --- a/reflex/constants/installer.py +++ b/reflex/constants/installer.py @@ -143,7 +143,7 @@ def DEPENDENCIES(cls) -> dict[str, str]: "postcss-import": "16.1.1", "@react-router/dev": _react_router_version, "@react-router/fs-routes": _react_router_version, - "rolldown-vite": "7.0.9", + "rolldown-vite": "7.0.11", } OVERRIDES = { # This should always match the `react` version in DEPENDENCIES for recharts compatibility. diff --git a/reflex/utils/misc.py b/reflex/utils/misc.py index 396b9037df2..bb3382e16ba 100644 --- a/reflex/utils/misc.py +++ b/reflex/utils/misc.py @@ -113,8 +113,6 @@ def preload_color_theme(): const systemPreference = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; const resolvedTheme = theme === "system" ? systemPreference : theme; - console.log("[PRELOAD] Theme applied:", resolvedTheme, "from theme:", theme, "system:", systemPreference); - // Apply theme immediately - blocks until complete // Use classList to avoid overwriting other classes document.documentElement.classList.remove("light", "dark"); @@ -124,7 +122,6 @@ def preload_color_theme(): } catch (e) { // Fallback to system preference on any error (resolve "system" to actual theme) const fallbackTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; - console.log("[PRELOAD] Error, falling back to:", fallbackTheme); document.documentElement.classList.remove("light", "dark"); document.documentElement.classList.add(fallbackTheme); document.documentElement.style.colorScheme = fallbackTheme;