code_block responds to color mode by default (#2228)

reflex/app.py

@@ -587,7 +587,9 @@ class App(Base):
         page_imports.update(_frontend_packages)
         prerequisites.install_frontend_packages(page_imports)
 
-    def _app_root(self, app_wrappers):
+    def _app_root(self, app_wrappers: dict[tuple[int, str], Component]) -> Component:
+        for component in tuple(app_wrappers.values()):
+            app_wrappers.update(component.get_app_wrap_components())
         order = sorted(app_wrappers, key=lambda k: k[0], reverse=True)
         root = parent = copy.deepcopy(app_wrappers[order[0]])
         for key in order[1:]:

reflex/components/datadisplay/code.py

@@ -3,7 +3,7 @@ import re
 from typing import Dict, Literal, Optional, Union
 
 from reflex.components.component import Component
-from reflex.components.forms import Button
+from reflex.components.forms import Button, color_mode_cond
 from reflex.components.layout import Box
 from reflex.components.libs.chakra import (
     ChakraComponent,
@@ -446,6 +446,10 @@ class CodeBlock(Component):
         # This component handles style in a special prop.
         custom_style = props.pop("custom_style", {})
 
+        if "theme" not in props:
+            # Default color scheme responds to global color mode.
+            props["theme"] = color_mode_cond(light="one-light", dark="one-dark")
+
         # react-syntax-highlighter doesnt have an explicit "light" or "dark" theme so we use one-light and one-dark
         # themes respectively to ensure code compatibility.
         if "theme" in props and not isinstance(props["theme"], Var):

reflex/components/datadisplay/code.pyi

@@ -10,7 +10,7 @@ from reflex.style import Style
 import re
 from typing import Dict, Literal, Optional, Union
 from reflex.components.component import Component
-from reflex.components.forms import Button
+from reflex.components.forms import Button, color_mode_cond
 from reflex.components.layout import Box
 from reflex.components.libs.chakra import ChakraComponent
 from reflex.components.media import Icon

reflex/components/typography/markdown.py

@@ -69,7 +69,7 @@ def get_base_component_map() -> dict[str, Callable]:
         "a": lambda value: Link.create(value),
         "code": lambda value: Code.create(value),
         "codeblock": lambda value, **props: CodeBlock.create(
-            value, theme="light", margin_y="1em", **props
+            value, margin_y="1em", **props
         ),
     }
 

tests/test_app.py

@@ -1209,11 +1209,13 @@ def test_app_wrap_compile_theme(compilable_app):
     assert (
         "function AppWrap({children}) {"
         "return ("
+        "<RadixThemesColorModeProvider>"
         "<RadixThemesTheme accentColor={`plum`}>"
         "<Fragment>"
         "{children}"
         "</Fragment>"
         "</RadixThemesTheme>"
+        "</RadixThemesColorModeProvider>"
         ")"
         "}"
     ) in "".join(app_js_lines)