reflex 0.8.4__tar.gz → 0.8.4a1__tar.gz

{reflex-0.8.4 → reflex-0.8.4a1}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: reflex
-Version: 0.8.4
+Version: 0.8.4a1
 Summary: Web apps in pure Python.
 Project-URL: homepage, https://reflex.dev
 Project-URL: repository, https://github.com/reflex-dev/reflex

{reflex-0.8.4 → reflex-0.8.4a1}/pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "reflex"
-version = "0.8.4"
+version = "0.8.4a1"
 description = "Web apps in pure Python."
 license.text = "Apache-2.0"
 authors = [

{reflex-0.8.4 → reflex-0.8.4a1}/reflex/.templates/web/utils/react-theme.js

@@ -18,9 +18,17 @@ const ThemeContext = createContext({
 
 export function ThemeProvider({ children, defaultTheme = "system" }) {
   const [theme, setTheme] = useState(defaultTheme);
-  const [systemTheme, setSystemTheme] = useState(
-    defaultTheme !== "system" ? defaultTheme : "light",
-  );
+
+  // 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 [isInitialized, setIsInitialized] = useState(false);
 
   const firstRender = useRef(true);
@@ -37,7 +45,6 @@ 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;
       }
     }
@@ -71,21 +78,19 @@ export function ThemeProvider({ children, defaultTheme = "system" }) {
     };
   });
 
-  // Save theme to localStorage whenever it changes
-  // Skip saving only if theme key already exists and we haven't initialized yet
+  // Save theme to localStorage whenever it changes (but not on initial mount)
   useEffect(() => {
-    const existingTheme = localStorage.getItem("theme");
-    if (!isInitialized && existingTheme !== null) return;
-    localStorage.setItem("theme", theme);
-  }, [theme]);
+    if (isInitialized) {
+      localStorage.setItem("theme", theme);
+    }
+  }, [theme, isInitialized]);
 
   useEffect(() => {
-    if (!isInitialized) return;
     const root = window.document.documentElement;
     root.classList.remove("light", "dark");
     root.classList.add(resolvedTheme);
     root.style.colorScheme = resolvedTheme;
-  }, [resolvedTheme, isInitialized]);
+  }, [resolvedTheme]);
 
   return createElement(
     ThemeContext.Provider,

{reflex-0.8.4 → reflex-0.8.4a1}/reflex/constants/installer.py

@@ -143,7 +143,7 @@ class PackageJson(SimpleNamespace):
         "postcss-import": "16.1.1",
         "@react-router/dev": _react_router_version,
         "@react-router/fs-routes": _react_router_version,
-        "rolldown-vite": "7.0.11",
+        "rolldown-vite": "7.0.9",
     }
     OVERRIDES = {
         # This should always match the `react` version in DEPENDENCIES for recharts compatibility.

{reflex-0.8.4 → reflex-0.8.4a1}/reflex/utils/misc.py

@@ -113,6 +113,8 @@ if (typeof document !== 'undefined') {
         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");
@@ -122,6 +124,7 @@ if (typeof document !== 'undefined') {
     } 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;