fix breakpoints / flash (#5627)

* fix breakpoints

* version bump

* I think this work

* clear logs

* reduce diff

* less diff

* less diff

* where did that import come from?

* less diff again

* pass the tests

Author: Lendemor

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,

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.

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;