simplify things further

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

@@ -1,5 +1,5 @@
 import { useTheme } from "$/utils/react-theme";
-import { useEffect, useState, createElement, useRef } from "react";
+import { createElement } from "react";
 import {
   ColorModeContext,
   defaultColorMode,
@@ -9,35 +9,11 @@ import {
 
 export default function RadixThemesColorModeProvider({ children }) {
   const { theme, resolvedTheme, setTheme } = useTheme();
-  const [rawColorMode, setRawColorMode] = useState(defaultColorMode);
-  const [resolvedColorMode, setResolvedColorMode] = useState(
-    defaultColorMode === "dark" ? "dark" : "light",
-  );
-
-  useEffect(() => {
-    setTheme(rawColorMode);
-  }, [rawColorMode]);
-
-  useEffect(() => {
-    if (isDevMode) {
-      const lastCompiledTimeInLocalStorage =
-        localStorage.getItem("last_compiled_time");
-      if (lastCompiledTimeInLocalStorage !== lastCompiledTimeStamp) {
-        // on app startup, make sure the application color mode is persisted correctly.
-        setTheme(defaultColorMode);
-        localStorage.setItem("last_compiled_time", lastCompiledTimeStamp);
-        return;
-      }
-    }
-  });
-
-  useEffect(() => {
-    setResolvedColorMode(resolvedTheme);
-  }, [resolvedTheme]);
 
   const toggleColorMode = () => {
-    setRawColorMode(resolvedTheme === "light" ? "dark" : "light");
+    setTheme(resolvedTheme === "light" ? "dark" : "light");
   };
+
   const setColorMode = (mode) => {
     const allowedModes = ["light", "dark", "system"];
     if (!allowedModes.includes(mode)) {
@@ -46,18 +22,19 @@ export default function RadixThemesColorModeProvider({ children }) {
       );
       mode = defaultColorMode;
     }
-    setRawColorMode(mode);
+    setTheme(mode);
   };
+
   return createElement(
     ColorModeContext.Provider,
     {
       value: {
         rawColorMode: theme,
-        resolvedColorMode,
+        resolvedColorMode: resolvedTheme,
         toggleColorMode,
         setColorMode,
       },
     },
-    children,
+    children
   );
 }

reflex/.templates/web/utils/react-theme.js

@@ -8,11 +8,15 @@ import {
   useMemo,
 } from "react";
 
+import { isDevMode, lastCompiledTimeStamp } from "$/utils/context";
+
 const ThemeContext = createContext();
 
 export function ThemeProvider({ children, defaultTheme = "system" }) {
   const [theme, setTheme] = useState(defaultTheme);
-  const [systemTheme, setSystemTheme] = useState("light");
+  const [systemTheme, setSystemTheme] = useState(
+    defaultTheme !== "system" ? defaultTheme : "light"
+  );
 
   const firstRender = useRef(true);
 
@@ -23,6 +27,16 @@ export function ThemeProvider({ children, defaultTheme = "system" }) {
 
     firstRender.current = false;
 
+    if (isDevMode) {
+      const lastCompiledTimeInLocalStorage =
+        localStorage.getItem("last_compiled_time");
+      if (lastCompiledTimeInLocalStorage !== lastCompiledTimeStamp) {
+        // on app startup, make sure the application color mode is persisted correctly.
+        localStorage.setItem("last_compiled_time", lastCompiledTimeStamp);
+        return;
+      }
+    }
+
     // Load saved theme from localStorage
     const savedTheme = localStorage.getItem("theme") || defaultTheme;
     setTheme(savedTheme);
@@ -65,7 +79,7 @@ export function ThemeProvider({ children, defaultTheme = "system" }) {
   return createElement(
     ThemeContext.Provider,
     { value: { theme, resolvedTheme, setTheme } },
-    children,
+    children
   );
 }