put reflexGlobalStyles before everything and add style to radix theme root

Author: adhami3310

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

@@ -1,5 +1,5 @@
 import { useTheme } from "$/utils/react-theme";
-import { createElement } from "react";
+import { createElement, useEffect } from "react";
 import { ColorModeContext, defaultColorMode } from "$/utils/context";
 
 export default function RadixThemesColorModeProvider({ children }) {
@@ -20,6 +20,16 @@ export default function RadixThemesColorModeProvider({ children }) {
     setTheme(mode);
   };
 
+  useEffect(() => {
+    const radixRoot = document.querySelector(
+      '.radix-themes[data-is-root-theme="true"]',
+    );
+    if (radixRoot) {
+      radixRoot.classList.remove("light", "dark");
+      radixRoot.classList.add(resolvedTheme);
+    }
+  }, [resolvedTheme]);
+
   return createElement(
     ColorModeContext.Provider,
     {

reflex/compiler/templates.py

@@ -200,7 +200,6 @@ def app_root_template(
     )
 
     return f"""
-import reflexGlobalStyles from '$/styles/__reflex_global_styles.css?url';
 {imports_str}
 {dynamic_imports_str}
 import {{ EventLoopProvider, StateProvider, defaultColorMode }} from "$/utils/context";
@@ -211,10 +210,6 @@ def app_root_template(
 
 {custom_code_str}
 
-export const links = () => [
-  {{ rel: 'stylesheet', href: reflexGlobalStyles, type: 'text/css' }}
-];
-
 function AppWrap({{children}}) {{
 {_render_hooks(hooks)}
 return ({_RenderUtils.render(render)})

reflex/compiler/utils.py

@@ -16,7 +16,7 @@
 from reflex.components.base.document import Links, ScrollRestoration
 from reflex.components.base.document import Meta as ReactMeta
 from reflex.components.component import Component, ComponentStyle, CustomComponent
-from reflex.components.el.elements.metadata import Head, Meta, Title
+from reflex.components.el.elements.metadata import Head, Link, Meta, Title
 from reflex.components.el.elements.other import Html
 from reflex.components.el.elements.sectioning import Body
 from reflex.constants.state import FIELD_MARKER
@@ -26,7 +26,7 @@
 from reflex.utils import format, imports, path_ops
 from reflex.utils.imports import ImportVar, ParsedImportDict
 from reflex.utils.prerequisites import get_web_dir
-from reflex.vars.base import Field, Var
+from reflex.vars.base import Field, Var, VarData
 
 # To re-export this function.
 merge_imports = imports.merge_imports
@@ -382,6 +382,20 @@ def create_document_root(
     # Always include the framework meta and link tags.
     always_head_components = [
         ReactMeta.create(),
+        Link.create(
+            rel="stylesheet",
+            type="text/css",
+            href=Var(
+                "reflexGlobalStyles",
+                _var_data=VarData(
+                    imports={
+                        "$/styles/__reflex_global_styles.css?url": [
+                            ImportVar(tag="reflexGlobalStyles", is_default=True)
+                        ]
+                    }
+                ),
+            ),
+        ),
         Links.create(),
     ]
     maybe_head_components = []