Fix unreadable initial heading in the State overview demo in dark mode

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.

docs/app/tests/test_state_overview_demo.py

@@ -0,0 +1,34 @@
+"""Regression coverage for the State overview page's color-cycling example."""
+
+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
+    # with the one test_docgen_double_eval registers for the real page.
+    body, _ = render_docgen_document(
+        "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.
+    assert re.search(r'colors: list\[str\] = \[\\?"var\(--gray-12\)\\?"', rendered)
+    assert not re.search(r'colors: list\[str\] = \[\\?"black\\?"', rendered)

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