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
index e2dd563e0..7c90111fc 100644
--- a/reflex/.templates/web/components/reflex/radix_themes_color_mode_provider.js
+++ b/reflex/.templates/web/components/reflex/radix_themes_color_mode_provider.js
@@ -1,22 +1,21 @@
-import { useTheme } from "next-themes"
-import { useEffect, useState } from "react"
-import { ColorModeContext, defaultColorMode } from "/utils/context.js"
-
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+import { ColorModeContext, defaultColorMode } from "/utils/context.js";
 
 export default function RadixThemesColorModeProvider({ children }) {
-    const {theme, setTheme} = useTheme()
-    const [colorMode, setColorMode] = useState(defaultColorMode)
-  
-    useEffect(() => {
-      setColorMode(theme)
-    }, [theme])
-  
-    const toggleColorMode = () => {
-      setTheme(theme === "light" ? "dark" : "light")
-    }
-    return (
-      <ColorModeContext.Provider value={[ colorMode, toggleColorMode ]}>
-        {children}
-      </ColorModeContext.Provider>
-    )
-  }
\ No newline at end of file
+  const { resolvedTheme, setTheme } = useTheme();
+  const [colorMode, setColorMode] = useState(defaultColorMode);
+
+  useEffect(() => {
+    setColorMode(resolvedTheme);
+  }, [resolvedTheme]);
+
+  const toggleColorMode = () => {
+    setTheme(resolvedTheme === "light" ? "dark" : "light");
+  };
+  return (
+    <ColorModeContext.Provider value={[colorMode, toggleColorMode]}>
+      {children}
+    </ColorModeContext.Provider>
+  );
+}
diff --git a/reflex/compiler/compiler.py b/reflex/compiler/compiler.py
index 128b2906a..81d8098de 100644
--- a/reflex/compiler/compiler.py
+++ b/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),
diff --git a/reflex/style.py b/reflex/style.py
index 814cf19fe..86f81cf97 100644
--- a/reflex/style.py
+++ b/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"