Fix dark-mode contrast in the layout component demos by FarhanAliRaza · Pull Request #7676 · reflex-dev/reflex

FarhanAliRaza · 2026-10-27T20:17:42Z

Type of change

Bug fix (non-breaking change which fixes an issue)

Description

The stack, box, spacer and aspect ratio demos use fixed light CSS background colors (orange, lightblue, papayawhip, ...) but inherit the theme text color, so in dark mode their labels rendered near-white on pastel boxes. This pins color="black" on those boxes so they read in both themes.

https://claude.ai/code/session_01LwJUCUDZhZY71q8Azr37BQ

Generated by Claude Code

The stack, box, spacer and aspect ratio demos use fixed light CSS background colors but inherit the theme text color, so in dark mode the labels rendered near-white on pastel boxes. Pin the text color on those boxes. Claude-Session: https://claude.ai/code/session_01LwJUCUDZhZY71q8Azr37BQ

cubic-dev-ai

All reported issues were addressed across 5 files

_{Reply with feedback, questions, or to request a fix.

View guided diff | Turn on auto-fix | Re-trigger cubic}

greptile-apps · 2026-10-27T20:20:45Z

Confidence Score: 5/5

[Low impact] The PR appears safe to merge; no blocking issues were found.

Summary

Makes labels readable on fixed-color backgrounds across four layout demos.

Layout demos keep labels readable on fixed-color backgrounds.

No new actionable issues were found. Tests were not run.

_{Reviews (4) · Last reviewed commit: "Merge remote-tracking branch 'origin/mai..." · Reviewed by Greptile}

…ession test Black on CSS green is about 4.09:1, below the 4.5:1 target; white reads better there. The test scans the four layout demos and fails when a box with a fixed named background has no explicit text color. Claude-Session: https://claude.ai/code/session_01LwJUCUDZhZY71q8Azr37BQ

Claude-Session: https://claude.ai/code/session_01LwJUCUDZhZY71q8Azr37BQ

cubic-dev-ai

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

_{Reply with feedback, questions, or to request a fix.

View guided diff | Turn on auto-fix | Re-trigger cubic}

codspeed · 2026-10-27T20:27:52Z

Merging this PR will degrade performance by 4.03%

2 warnings

⚠️ 21 benchmarks are dominated by system calls

System calls cannot be simulated consistently and are left out of the measure. The reported value understates the real cost. Switch to the Walltime instrument to measure them.

Learn more about system calls

See affected benchmarks

⚠️ Base and head ran on different runner types

Some benchmarks with significant performance changes were compared across different runner types, so the changes might not come from the code. Run base and head on the same runner type, or use CodSpeed Macro Runners for more stable results.

Learn more about Macro Runners

Open the report in CodSpeed to investigate

❌ 1 regressed benchmark
✅ 147 untouched benchmarks

Warning

Please fix the performance issues or acknowledge them on CodSpeed.

Performance Changes

	Benchmark	`BASE`	`HEAD`	Efficiency
❌	`test_route_argument_extraction`	116.7 µs	121.6 µs	-4.03%

Tip

Investigate this regression by commenting @codspeedbot fix this regression on this PR, or directly use the CodSpeed MCP with your agent.

_{Comparing ccr-921eda66-kjt8mt-layout-dark-mode (cac21f3) with main (bac5d98)}

…t test The test now finds every bg/background_color prop, inline or not, and looks for color anywhere in the enclosing call rather than requiring a fixed prop order. Claude-Session: https://claude.ai/code/session_01LwJUCUDZhZY71q8Azr37BQ

linear-code · 2026-10-27T20:32:56Z

ENG-13586

FarhanAliRaza · 2026-10-27T20:39:09Z

CI note: integration-app-harness-playwright failed on cac21f3 in six matrix legs with the same error in tests/integration/tests_playwright/test_playground.py and test_table.py:

KeyError: 'playground___states___widgets____widget_state'
  File "reflex/istate/delta.py", line 293, in build_delta

This PR only touches four docs markdown files, a docs test and a news fragment, none of which the integration harness loads. The same workflow is green on main (bac5d98) and passed on the sibling docs PRs #7674, #7675, #7679, #7680 and #7681, including runs that started after this one, so it does not reproduce. No fix PR for it exists yet that I can port. I tried to re-run the failed jobs but don't have permission on this repo (403), so a maintainer re-run of the integration-app-harness workflow is needed to clear the gate.

Generated by Claude Code

FarhanAliRaza · 2026-10-27T22:02:41Z

Validated in the docs app running locally on this branch, in dark mode:

Stack

Aspect ratio

Spacer

Generated by Claude Code

…ayout-dark-mode

FarhanAliRaza requested review from a team and Alek99 as code owners October 27, 2026 20:17

FarhanAliRaza added the documentation Improvements or additions to documentation label Oct 27, 2026 — with Claude

cubic-dev-ai Bot reviewed Oct 27, 2026

View reviewed changes

Comment thread docs/library/layout/aspect_ratio.md

greptile-apps Bot reviewed Oct 27, 2026

View reviewed changes

Comment thread docs/library/layout/aspect_ratio.md Outdated

Comment thread docs/library/layout/spacer.md

FarhanAliRaza added 2 commits October 27, 2026 20:21

Pin text color on the inline red stack boxes too

717507c

Claude-Session: https://claude.ai/code/session_01LwJUCUDZhZY71q8Azr37BQ

cubic-dev-ai Bot reviewed Oct 27, 2026

View reviewed changes

Comment thread docs/app/tests/test_layout_demo_contrast.py Outdated

Comment thread docs/app/tests/test_layout_demo_contrast.py Outdated

Merge remote-tracking branch 'origin/main' into ccr-921eda66-kjt8mt-l…

7c0c558

…ayout-dark-mode

Navigation Menu

Repository navigation

Fix dark-mode contrast in the layout component demos - #7676

Fix dark-mode contrast in the layout component demos#7676
FarhanAliRaza wants to merge 5 commits into
mainfrom
ccr-921eda66-kjt8mt-layout-dark-mode

FarhanAliRaza commented Oct 27, 2026 •

edited by cubic-dev-ai Bot

Loading

Uh oh!

cubic-dev-ai Bot left a comment •

edited

Loading

Uh oh!

Uh oh!

greptile-apps Bot commented Oct 27, 2026 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

cubic-dev-ai Bot left a comment •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

codspeed Bot commented Oct 27, 2026 •

edited

Loading

Uh oh!

linear-code Bot commented Oct 27, 2026

Uh oh!

FarhanAliRaza commented Oct 27, 2026 •

edited

Loading

Uh oh!

FarhanAliRaza commented Oct 27, 2026

Uh oh!

This branch has not been deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

FarhanAliRaza commented Oct 27, 2026 • edited by cubic-dev-ai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Type of change

Description

Uh oh!

cubic-dev-ai Bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

greptile-apps Bot commented Oct 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Confidence Score: 5/5

Summary

Uh oh!

Uh oh!

Uh oh!

cubic-dev-ai Bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

codspeed Bot commented Oct 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merging this PR will degrade performance by 4.03%

Performance Changes

Uh oh!

linear-code Bot commented Oct 27, 2026

Uh oh!

FarhanAliRaza commented Oct 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

FarhanAliRaza commented Oct 27, 2026

Uh oh!

This branch has not been deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

FarhanAliRaza commented Oct 27, 2026 •

edited by cubic-dev-ai Bot

Loading

cubic-dev-ai Bot left a comment •

edited

Loading

greptile-apps Bot commented Oct 27, 2026 •

edited

Loading

cubic-dev-ai Bot left a comment •

edited

Loading

codspeed Bot commented Oct 27, 2026 •

edited

Loading

FarhanAliRaza commented Oct 27, 2026 •

edited

Loading