Apply app theme color_mode/appearance as next-themes default (#2654)

* Apply app theme color_mode/appearance as next-themes default

* compiler: blacken

Author: masenf

reflex/.templates/jinja/web/pages/_app.js.jinja2

@@ -5,7 +5,7 @@ import '/styles/styles.css'
 {% endblock %}
 
 {% block declaration %}
-import { EventLoopProvider, StateProvider } from "/utils/context.js";
+import { EventLoopProvider, StateProvider, defaultColorMode } from "/utils/context.js";
 import { ThemeProvider } from 'next-themes'
 
 
@@ -28,7 +28,7 @@ function AppWrap({children}) {
 
 export default function MyApp({ Component, pageProps }) {
   return (
-    <ThemeProvider defaultTheme="light" storageKey="chakra-ui-color-mode" attribute="class">
+    <ThemeProvider defaultTheme={ defaultColorMode } storageKey="chakra-ui-color-mode" attribute="class">
       <AppWrap>
         <StateProvider>
           <EventLoopProvider>

reflex/.templates/jinja/web/utils/context.js.jinja2

@@ -7,6 +7,7 @@ export const initialState = {{ initial_state|json_dumps }}
 export const initialState = {}
 {% endif %}
 
+export const defaultColorMode = "{{ default_color_mode }}"
 export const ColorModeContext = createContext(null);
 export const UploadFilesContext = createContext(null);
 export const DispatchContext = createContext(null);

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

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

reflex/app.py

@@ -785,7 +785,7 @@ def submit_work(fn, *args, **kwargs):
             submit_work(compiler.compile_theme, style=self.style)
 
             # Compile the contexts.
-            submit_work(compiler.compile_contexts, self.state)
+            submit_work(compiler.compile_contexts, self.state, self.theme)
 
             # Compile the Tailwind config.
             if config.tailwind is not None:

reflex/compiler/compiler.py

@@ -16,6 +16,7 @@
 )
 from reflex.config import get_config
 from reflex.state import BaseState
+from reflex.style import LIGHT_COLOR_MODE
 from reflex.utils.imports import ImportVar
 
 
@@ -67,11 +68,12 @@ def _is_dev_mode() -> bool:
     return os.environ.get("REFLEX_ENV_MODE", "dev") == "dev"
 
 
-def _compile_contexts(state: Optional[Type[BaseState]]) -> str:
+def _compile_contexts(state: Optional[Type[BaseState]], theme: Component) -> str:
     """Compile the initial state and contexts.
 
     Args:
         state: The app state.
+        theme: The top-level app theme.
 
     Returns:
         The compiled context file.
@@ -82,9 +84,13 @@ def _compile_contexts(state: Optional[Type[BaseState]]) -> str:
             state_name=state.get_name(),
             client_storage=utils.compile_client_storage(state),
             is_dev_mode=_is_dev_mode(),
+            default_color_mode=getattr(theme, "appearance", LIGHT_COLOR_MODE),
         )
         if state
-        else templates.CONTEXT.render(is_dev_mode=_is_dev_mode())
+        else templates.CONTEXT.render(
+            is_dev_mode=_is_dev_mode(),
+            default_color_mode=getattr(theme, "appearance", LIGHT_COLOR_MODE),
+        )
     )
 
 
@@ -345,19 +351,23 @@ def compile_theme(style: ComponentStyle) -> tuple[str, str]:
     return output_path, code
 
 
-def compile_contexts(state: Optional[Type[BaseState]]) -> tuple[str, str]:
+def compile_contexts(
+    state: Optional[Type[BaseState]],
+    theme: Component,
+) -> tuple[str, str]:
     """Compile the initial state / context.
 
     Args:
         state: The app state.
+        theme: The top-level app theme.
 
     Returns:
         The path and code of the compiled context.
     """
     # Get the path for the output file.
     output_path = utils.get_context_path()
 
-    return output_path, _compile_contexts(state)
+    return output_path, _compile_contexts(state, theme)
 
 
 def compile_page(

reflex/components/radix/themes/color_mode.py

@@ -71,7 +71,7 @@ def create(cls, *children, **props):
         """
         return Switch.create(
             *children,
-            is_checked=color_mode != LIGHT_COLOR_MODE,
+            checked=color_mode != LIGHT_COLOR_MODE,
             on_change=toggle_color_mode,
             **props,
         )

reflex/constants/installer.py

@@ -107,7 +107,7 @@ class Commands(SimpleNamespace):
         "json5": "2.2.3",
         "next": "14.0.1",
         "next-sitemap": "4.1.8",
-        "next-themes": "0.2.0",
+        "next-themes": "0.2.1",
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "socket.io-client": "4.6.1",