Add dark mode benchmark image

[Alek99]

Summary

• add a dark-themed benchmark render using the same data, annotations, and dimensions as the existing light image
• switch the README benchmark image with a theme-aware <picture> element
• add --color-scheme dark support to the benchmark plot exporter and document the reproduction command

Why

The README referenced only the light benchmark PNG, so it remained a bright white panel when GitHub was viewed in dark mode. The new source selection keeps the benchmark legible and visually consistent with the active color scheme.

Impact

GitHub automatically serves the dark benchmark image for dark-mode readers while retaining the existing light image as the fallback. Future dark assets can be regenerated from the benchmark source instead of being hand-edited.

Validation

• uv run --with pre-commit pre-commit run --all-files
• uv run ruff check .
• uv run ruff format --check .
• verified README source selection, dark chart theme tokens, and 2000×1040 PNG dimensions

Summary by CodeRabbit

• New Features

  • Added dark-mode support for benchmark charts and images.
  • Added a command-line option to generate charts in light or dark color schemes.
  • Benchmark images now automatically display the appropriate asset based on the selected color scheme.
  • Standardized benchmark chart styling across generated charts and documentation demos.

• Documentation

  • Updated benchmark reproduction instructions with the dark-mode chart command.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 747c8a72-ecd4-46cb-940d-5d552f7d193d

📥 Commits

Reviewing files that changed from the base of the PR and between b92daf1 and d761c32.

⛔ Files ignored due to path filters (1)

• spec/assets/ux-render-time.png is excluded by !**/*.png

📒 Files selected for processing (5)

• benchmarks/plot_ux.py
• docs/app/tests/test_docs_site.py
• docs/app/xy_docs/demos/benchmark_charts.py
• python/xy/_benchmark_theme.py
• tests/test_benchmark_theme.py

---

📝 Walkthrough

Walkthrough

Benchmark plotting now supports light and dark color schemes. Shared theme helpers configure the benchmark demo and generated charts. Documentation generates dark chart assets, and the README selects light or dark benchmark images based on display mode.

Changes

Dark-mode benchmark support

Layer / File(s)	Summary
Shared benchmark theme contract python/xy/_benchmark_theme.py, tests/test_benchmark_theme.py	Defines shared light and dark theme tokens, CSS-variable mappings, live theme values, and the benchmark chart class. Tests validate both color schemes.
Color-scheme plotting support benchmarks/plot_ux.py	Adds an optional color_scheme parameter and a --color-scheme CLI option. The selected shared theme applies to both generated charts.
Documentation demo and asset usage docs/app/xy_docs/demos/benchmark_charts.py, docs/app/tests/test_docs_site.py, docs/overview/benchmarks.md, README.md	Uses shared theme helpers in the demo, validates the demo configuration, generates a dark chart asset, and selects themed README assets with a responsive <picture> element.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
  participant CLI
  participant build
  participant BenchmarkTheme
  participant xy_line_chart
  CLI->>build: pass selected color scheme
  build->>BenchmarkTheme: select shared light or dark theme
  BenchmarkTheme-->>build: return theme configuration
  build->>xy_line_chart: generate themed benchmark charts

Loading

Possibly related PRs

• reflex-dev/xy#283: Both modify the README benchmark image markup.
• reflex-dev/xy#297: Both add themed light/dark README imagery.
• reflex-dev/xy#373: Both modify the benchmark chart demo and benchmark documentation.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 45.45% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the primary change: adding a dark-mode benchmark image.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches 💡 1

📝 Generate docstrings 💡

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch agent/readme-benchmark-dark-mode

---

_{Comment @coderabbitai help to get the list of available commands.}

[codspeed-hq]

Merging this PR will not alter performance

✅ 109 untouched benchmarks
⏩ 2 skipped benchmarks¹

---

_{Comparing agent/readme-benchmark-dark-mode (d761c32) with main (d505ef5)}

Footnotes

1. 2 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports. ↩

[cubic-dev-ai]

All reported issues were addressed across 4 files

<sub>Reply with feedback, questions, or to request a fix.

Fix all with cubic | Re-trigger cubic</sub>

[cubic-dev-ai]

All reported issues were addressed across 5 files (changes from recent commits).

<sub>Tip: Review your code locally with the cubic CLI to iterate faster.
Tip: cubic used a learning from your PR history. Let your coding agent read cubic learnings directly with the cubic MCP.

Fix all with cubic | Re-trigger cubic</sub>