From 53c3951de3aa7f2a267087c6e7059880592d82db Mon Sep 17 00:00:00 2001 From: Farhan Ali Raza Date: Wed, 29 Apr 2026 18:30:44 +0500 Subject: [PATCH 1/3] fix: reject string CodeBlock theme to surface invalid values at create time --- .../src/reflex_components_code/code.py | 2 +- pyi_hashes.json | 2 +- tests/units/components/datadisplay/test_code.py | 5 +++++ 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/reflex-components-code/src/reflex_components_code/code.py b/packages/reflex-components-code/src/reflex_components_code/code.py index eb96cde27d6..5078ba86214 100644 --- a/packages/reflex-components-code/src/reflex_components_code/code.py +++ b/packages/reflex-components-code/src/reflex_components_code/code.py @@ -387,7 +387,7 @@ class CodeBlock(Component, MarkdownComponentMap): alias = "SyntaxHighlighter" - theme: Var[Theme | str] = field( + theme: Var[Theme] = field( default=Theme.one_light, doc='The theme to use ("light" or "dark").' ) diff --git a/pyi_hashes.json b/pyi_hashes.json index b0bf954a0a2..2bfd107f8e7 100644 --- a/pyi_hashes.json +++ b/pyi_hashes.json @@ -1,5 +1,5 @@ { - "packages/reflex-components-code/src/reflex_components_code/code.pyi": "a879ccd253e901964a7ab7ea7154f904", + "packages/reflex-components-code/src/reflex_components_code/code.pyi": "d3b9e3fe258afa06a1125aa81dc94983", "packages/reflex-components-code/src/reflex_components_code/shiki_code_block.pyi": "d3e0c33fdc34f5c154ac387d550c0d29", "packages/reflex-components-core/src/reflex_components_core/__init__.pyi": "82b29d23f2490161d42fd21021bd39c3", "packages/reflex-components-core/src/reflex_components_core/base/__init__.pyi": "7009187aaaf191814d031e5462c48318", diff --git a/tests/units/components/datadisplay/test_code.py b/tests/units/components/datadisplay/test_code.py index 5b20c0584ea..36cc2a51aa4 100644 --- a/tests/units/components/datadisplay/test_code.py +++ b/tests/units/components/datadisplay/test_code.py @@ -10,3 +10,8 @@ def test_code_light_dark_theme(theme, expected): code_block = CodeBlock.create(theme=theme) assert code_block.theme._js_expr == expected # pyright: ignore [reportAttributeAccessIssue] + + +def test_code_block_rejects_string_theme(): + with pytest.raises(TypeError, match=r"CodeBlock\.theme"): + CodeBlock.create("print('Hello')", theme="one_dark") # pyright: ignore[reportArgumentType] From 6fdddeca41d67a0ab7de1bfbc101e9c2986bd757 Mon Sep 17 00:00:00 2001 From: Farhan Ali Raza <62690310+FarhanAliRaza@users.noreply.github.com> Date: Fri, 1 May 2026 15:15:53 +0500 Subject: [PATCH 2/3] Update packages/reflex-components-code/src/reflex_components_code/code.py Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com> --- .../reflex-components-code/src/reflex_components_code/code.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/reflex-components-code/src/reflex_components_code/code.py b/packages/reflex-components-code/src/reflex_components_code/code.py index 5078ba86214..f2504fe0ed9 100644 --- a/packages/reflex-components-code/src/reflex_components_code/code.py +++ b/packages/reflex-components-code/src/reflex_components_code/code.py @@ -388,7 +388,7 @@ class CodeBlock(Component, MarkdownComponentMap): alias = "SyntaxHighlighter" theme: Var[Theme] = field( - default=Theme.one_light, doc='The theme to use ("light" or "dark").' + default=Theme.one_light, doc="The theme to use (e.g. Theme.one_light or Theme.one_dark)." ) language: Var[LiteralCodeLanguage] = field( From 00d2b37f0673efaf9b97423d6151f4a821947254 Mon Sep 17 00:00:00 2001 From: Farhan Ali Raza Date: Fri, 1 May 2026 15:48:23 +0500 Subject: [PATCH 3/3] docs: document CodeBlock themes namespace and color_mode_cond usage --- docs/library/data-display/code_block.md | 25 +++++++++++++++++++ .../src/reflex_components_code/code.py | 3 ++- pyi_hashes.json | 2 +- .../units/components/datadisplay/test_code.py | 21 ++++++++++++++++ 4 files changed, 49 insertions(+), 2 deletions(-) diff --git a/docs/library/data-display/code_block.md b/docs/library/data-display/code_block.md index d7e299aa2d9..b2875611624 100644 --- a/docs/library/data-display/code_block.md +++ b/docs/library/data-display/code_block.md @@ -23,3 +23,28 @@ rx.code_block( show_line_numbers=True, ) ``` + +## Themes + +The `theme` prop must be set to a `Theme` value accessed from the `rx.code_block.themes` namespace; strings are not accepted. By default, the code block uses `one_light` in light mode and `one_dark` in dark mode. + +```python demo +rx.code_block( + """print("Hello, world!")""", + language="python", + theme=rx.code_block.themes.dracula, +) +``` + +To pick a theme that responds to the global color mode, pass `rx.color_mode_cond` with the desired light and dark variants: + +```python demo +rx.code_block( + """print("Hello, world!")""", + language="python", + theme=rx.color_mode_cond( + light=rx.code_block.themes.one_light, + dark=rx.code_block.themes.one_dark, + ), +) +``` diff --git a/packages/reflex-components-code/src/reflex_components_code/code.py b/packages/reflex-components-code/src/reflex_components_code/code.py index 5078ba86214..a6fec988df6 100644 --- a/packages/reflex-components-code/src/reflex_components_code/code.py +++ b/packages/reflex-components-code/src/reflex_components_code/code.py @@ -388,7 +388,8 @@ class CodeBlock(Component, MarkdownComponentMap): alias = "SyntaxHighlighter" theme: Var[Theme] = field( - default=Theme.one_light, doc='The theme to use ("light" or "dark").' + default=Theme.one_light, + doc="The theme to use, accessed via rx.code_block.themes (e.g. rx.code_block.themes.one_dark).", ) language: Var[LiteralCodeLanguage] = field( diff --git a/pyi_hashes.json b/pyi_hashes.json index 2bfd107f8e7..ab26afb92c2 100644 --- a/pyi_hashes.json +++ b/pyi_hashes.json @@ -1,5 +1,5 @@ { - "packages/reflex-components-code/src/reflex_components_code/code.pyi": "d3b9e3fe258afa06a1125aa81dc94983", + "packages/reflex-components-code/src/reflex_components_code/code.pyi": "6ef91a4a4976e66b2761539e16d4f28e", "packages/reflex-components-code/src/reflex_components_code/shiki_code_block.pyi": "d3e0c33fdc34f5c154ac387d550c0d29", "packages/reflex-components-core/src/reflex_components_core/__init__.pyi": "82b29d23f2490161d42fd21021bd39c3", "packages/reflex-components-core/src/reflex_components_core/base/__init__.pyi": "7009187aaaf191814d031e5462c48318", diff --git a/tests/units/components/datadisplay/test_code.py b/tests/units/components/datadisplay/test_code.py index 36cc2a51aa4..42b51b773e5 100644 --- a/tests/units/components/datadisplay/test_code.py +++ b/tests/units/components/datadisplay/test_code.py @@ -1,6 +1,8 @@ import pytest from reflex_components_code.code import CodeBlock, Theme +import reflex as rx + @pytest.mark.parametrize( ("theme", "expected"), @@ -15,3 +17,22 @@ def test_code_light_dark_theme(theme, expected): def test_code_block_rejects_string_theme(): with pytest.raises(TypeError, match=r"CodeBlock\.theme"): CodeBlock.create("print('Hello')", theme="one_dark") # pyright: ignore[reportArgumentType] + + +def test_code_block_accepts_color_mode_cond_theme(): + theme = rx.color_mode_cond( + light=rx.code_block.themes.one_light, + dark=rx.code_block.themes.one_dark, + ) + code_block = CodeBlock.create("print('Hello')", theme=theme) + + rendered = code_block.render() + style_prop = next((p for p in rendered["props"] if p.startswith("style:")), None) + assert style_prop is not None, "code block did not render a style prop" + assert "resolvedColorMode" in style_prop + assert "oneLight" in style_prop + assert "oneDark" in style_prop + + imports = code_block._get_all_imports() + assert "react-syntax-highlighter/dist/esm/styles/prism/one-light" in imports + assert "react-syntax-highlighter/dist/esm/styles/prism/one-dark" in imports