From 6904d41d71b3c64310fd898bc5710f2dff8554e2 Mon Sep 17 00:00:00 2001 From: Farhan Date: Tue, 27 Oct 2026 20:15:05 +0000 Subject: [PATCH 1/6] Fix unreadable initial heading in the State overview demo in dark mode The example cycled from a hard-coded black, which is near-invisible on the dark theme card. Start from the theme's foreground color instead. Claude-Session: https://claude.ai/code/session_01LwJUCUDZhZY71q8Azr37BQ --- docs/app/news/+state-overview-dark-heading.bugfix.md | 1 + docs/state/overview.md | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) create mode 100644 docs/app/news/+state-overview-dark-heading.bugfix.md diff --git a/docs/app/news/+state-overview-dark-heading.bugfix.md b/docs/app/news/+state-overview-dark-heading.bugfix.md new file mode 100644 index 00000000000..273de9bcc56 --- /dev/null +++ b/docs/app/news/+state-overview-dark-heading.bugfix.md @@ -0,0 +1 @@ +Fix the State overview example heading rendering black on the dark background in dark mode. diff --git a/docs/state/overview.md b/docs/state/overview.md index 2f3fd50a902..c2fb5b6e427 100644 --- a/docs/state/overview.md +++ b/docs/state/overview.md @@ -122,7 +122,7 @@ Click the text to change its color. ```python demo exec class ExampleState(rx.State): # A base var for the list of colors to cycle through. - colors: list[str] = ["black", "red", "green", "blue", "purple"] + colors: list[str] = ["var(--gray-12)", "red", "green", "blue", "purple"] # A base var for the index of the current color. index: int = 0 From 458e1415c72aedc45ee5196527da7de69adebc6c Mon Sep 17 00:00:00 2001 From: Farhan Date: Tue, 27 Oct 2026 20:22:06 +0000 Subject: [PATCH 2/6] Add regression test for the State overview heading color Claude-Session: https://claude.ai/code/session_01LwJUCUDZhZY71q8Azr37BQ --- docs/app/tests/test_state_overview_demo.py | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 docs/app/tests/test_state_overview_demo.py diff --git a/docs/app/tests/test_state_overview_demo.py b/docs/app/tests/test_state_overview_demo.py new file mode 100644 index 00000000000..088463935c0 --- /dev/null +++ b/docs/app/tests/test_state_overview_demo.py @@ -0,0 +1,11 @@ +"""Regression coverage for the State overview page's color-cycling example.""" + +from reflex_docs.docgen_pipeline import render_docgen_document + + +def test_example_heading_starts_theme_aware(): + """The first color is the theme foreground, not black, so it reads in dark mode.""" + body, _ = render_docgen_document("docs/state/overview.md", "../state/overview.md") + rendered = str(body) + assert 'colors: list[str] = ["var(--gray-12)"' in rendered + assert 'colors: list[str] = ["black"' not in rendered From 51c85e3fe3ee6a6ffe77e269782648b4f1159994 Mon Sep 17 00:00:00 2001 From: Farhan Date: Tue, 27 Oct 2026 20:22:50 +0000 Subject: [PATCH 3/6] Match the embedded example source in the State overview regression test Claude-Session: https://claude.ai/code/session_01LwJUCUDZhZY71q8Azr37BQ --- docs/app/tests/test_state_overview_demo.py | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/docs/app/tests/test_state_overview_demo.py b/docs/app/tests/test_state_overview_demo.py index 088463935c0..cba63b1348b 100644 --- a/docs/app/tests/test_state_overview_demo.py +++ b/docs/app/tests/test_state_overview_demo.py @@ -1,5 +1,7 @@ """Regression coverage for the State overview page's color-cycling example.""" +import re + from reflex_docs.docgen_pipeline import render_docgen_document @@ -7,5 +9,6 @@ def test_example_heading_starts_theme_aware(): """The first color is the theme foreground, not black, so it reads in dark mode.""" body, _ = render_docgen_document("docs/state/overview.md", "../state/overview.md") rendered = str(body) - assert 'colors: list[str] = ["var(--gray-12)"' in rendered - assert 'colors: list[str] = ["black"' not in rendered + # The example source is embedded with escaped quotes, so match loosely. + assert re.search(r'colors: list\[str\] = \[\\?"var\(--gray-12\)\\?"', rendered) + assert not re.search(r'colors: list\[str\] = \[\\?"black\\?"', rendered) From 9830c090d2249f78d177ac1aef1e8b2f41446a02 Mon Sep 17 00:00:00 2001 From: Farhan Date: Tue, 27 Oct 2026 20:27:11 +0000 Subject: [PATCH 4/6] Anchor the State overview test to the test file instead of the working directory Claude-Session: https://claude.ai/code/session_01LwJUCUDZhZY71q8Azr37BQ --- docs/app/tests/test_state_overview_demo.py | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/docs/app/tests/test_state_overview_demo.py b/docs/app/tests/test_state_overview_demo.py index cba63b1348b..eb1814dfd96 100644 --- a/docs/app/tests/test_state_overview_demo.py +++ b/docs/app/tests/test_state_overview_demo.py @@ -1,13 +1,18 @@ """Regression coverage for the State overview page's color-cycling example.""" import re +from pathlib import Path from reflex_docs.docgen_pipeline import render_docgen_document +DOCS = Path(__file__).resolve().parents[2] + def test_example_heading_starts_theme_aware(): """The first color is the theme foreground, not black, so it reads in dark mode.""" - body, _ = render_docgen_document("docs/state/overview.md", "../state/overview.md") + body, _ = render_docgen_document( + "docs/state/overview.md", str(DOCS / "state" / "overview.md") + ) rendered = str(body) # The example source is embedded with escaped quotes, so match loosely. assert re.search(r'colors: list\[str\] = \[\\?"var\(--gray-12\)\\?"', rendered) From f8f1a742b43ecb04ca16ed13f2561f7f51222afe Mon Sep 17 00:00:00 2001 From: Farhan Date: Tue, 27 Oct 2026 20:29:17 +0000 Subject: [PATCH 5/6] Render the State overview test under its own virtual path Keeps the demo's state class from colliding with the one test_docgen_double_eval registers for the real page. Claude-Session: https://claude.ai/code/session_01LwJUCUDZhZY71q8Azr37BQ --- docs/app/tests/test_state_overview_demo.py | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/app/tests/test_state_overview_demo.py b/docs/app/tests/test_state_overview_demo.py index eb1814dfd96..7c32e26d612 100644 --- a/docs/app/tests/test_state_overview_demo.py +++ b/docs/app/tests/test_state_overview_demo.py @@ -10,8 +10,10 @@ def test_example_heading_starts_theme_aware(): """The first color is the theme foreground, not black, so it reads in dark mode.""" + # A test-specific virtual path keeps the demo's state class from colliding + # with the one test_docgen_double_eval registers for the real page. body, _ = render_docgen_document( - "docs/state/overview.md", str(DOCS / "state" / "overview.md") + "docs/state/overview_heading_test.md", str(DOCS / "state" / "overview.md") ) rendered = str(body) # The example source is embedded with escaped quotes, so match loosely. From cc3338b296fc7b64389f455d9b0c2b18266e2c51 Mon Sep 17 00:00:00 2001 From: Farhan Date: Tue, 27 Oct 2026 20:35:27 +0000 Subject: [PATCH 6/6] Isolate the State overview test's state registration Claude-Session: https://claude.ai/code/session_01LwJUCUDZhZY71q8Azr37BQ --- docs/app/tests/test_state_overview_demo.py | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/docs/app/tests/test_state_overview_demo.py b/docs/app/tests/test_state_overview_demo.py index 7c32e26d612..116bbc08ff8 100644 --- a/docs/app/tests/test_state_overview_demo.py +++ b/docs/app/tests/test_state_overview_demo.py @@ -3,11 +3,24 @@ import re from pathlib import Path +import pytest +import reflex as rx +from reflex_base.registry import RegistrationContext + from reflex_docs.docgen_pipeline import render_docgen_document DOCS = Path(__file__).resolve().parents[2] +@pytest.fixture(autouse=True) +def isolated_registration(): + """Keep the demo's state class out of the shared registries other tests use.""" + with RegistrationContext( + _config=rx.Config(app_name="reflex_docs", frontend_path="/docs") + ): + yield + + def test_example_heading_starts_theme_aware(): """The first color is the theme foreground, not black, so it reads in dark mode.""" # A test-specific virtual path keeps the demo's state class from colliding