default color_mode is now system color (#3457)

reflex/.templates/web/components/reflex/radix_themes_color_mode_provider.js

@@ -1,22 +1,21 @@
-import { useTheme } from "next-themes"
+import { useTheme } from "next-themes";
-import { useEffect, useState } from "react"
+import { useEffect, useState } from "react";
-import { ColorModeContext, defaultColorMode } from "/utils/context.js"
+import { ColorModeContext, defaultColorMode } from "/utils/context.js";
-
 
 export default function RadixThemesColorModeProvider({ children }) {
-    const {theme, setTheme} = useTheme()
+  const { resolvedTheme, setTheme } = useTheme();
-    const [colorMode, setColorMode] = useState(defaultColorMode)
+  const [colorMode, setColorMode] = useState(defaultColorMode);
-  
+
-    useEffect(() => {
+  useEffect(() => {
-      setColorMode(theme)
+    setColorMode(resolvedTheme);
-    }, [theme])
+  }, [resolvedTheme]);
-  
+
-    const toggleColorMode = () => {
+  const toggleColorMode = () => {
-      setTheme(theme === "light" ? "dark" : "light")
+    setTheme(resolvedTheme === "light" ? "dark" : "light");
-    }
+  };
-    return (
+  return (
-      <ColorModeContext.Provider value={[ colorMode, toggleColorMode ]}>
+    <ColorModeContext.Provider value={[colorMode, toggleColorMode]}>
-        {children}
+      {children}
-      </ColorModeContext.Provider>
+    </ColorModeContext.Provider>
-    )
+  );
-  }
+}

reflex/compiler/compiler.py

@@ -17,7 +17,7 @@ from reflex.components.component import (
 )
 from reflex.config import get_config
 from reflex.state import BaseState
-from reflex.style import LIGHT_COLOR_MODE
+from reflex.style import SYSTEM_COLOR_MODE
 from reflex.utils.exec import is_prod_mode
 from reflex.utils.imports import ImportVar
 from reflex.vars import Var
@@ -79,7 +79,7 @@ def _compile_contexts(state: Optional[Type[BaseState]], theme: Component | None)
     """
     appearance = getattr(theme, "appearance", None)
     if appearance is None:
-        appearance = LIGHT_COLOR_MODE
+        appearance = SYSTEM_COLOR_MODE
     return (
         templates.CONTEXT.render(
             initial_state=utils.compile_state(state),

reflex/style.py

@@ -12,6 +12,7 @@ from reflex.vars import BaseVar, Var, VarData
 
 VarData.update_forward_refs()  # Ensure all type definitions are resolved
 
+SYSTEM_COLOR_MODE: str = "system"
 LIGHT_COLOR_MODE: str = "light"
 DARK_COLOR_MODE: str = "dark"