fix: correct text contrast in download section for dark mode - #2993
swastik-basu wants to merge 3 commits into
Conversation
|
Hi! The CI workflow is currently not running because the PR is not labeled safe to test. Could someone with the required permissions please mark it safe to test? Thanks! |
|
Yes — "Also available for" and the OS-name text in all three branches (Windows/Mac/Linux) are plain text nodes with no color class of their own, so they inherit |
|
Also — the UI Tests check is showing "1 change must be accepted as baseline," which I believe is just the visual regression tool correctly flagging the intentional contrast fix as a new diff. Let me know if there's anything I need to do on my end, or if a maintainer needs to accept it as the new baseline. |
|
Follow-up to #2924 |
Thanks for the reference. I looked at #2924 — noticed it introduced new CSS variables (--surface-*) and manual dark: overrides, which I believe is why it was later reverted from main. This PR takes a narrower approach: it reuses |

Summary
Fixes unreadable text (white text on white background) in the "Try it now" download
section when the site is viewed in dark mode.
Closes #2920
Root cause
LandingPageDownload.client.vuesets a fixed light background(
bg-primary-50 bg-opacity-50) but never sets an explicit text color. Thecodebase relies entirely on Nuxt UI's automatic light/dark semantic tokens
(e.g.
text-highlighted) with no manualdark:overrides anywhere — so thissection's text was inheriting a mode-adaptive color intended to pair with a
mode-adaptive background. Since this section's background is fixed instead,
dark mode produced light text on a light background.
Fix
Added
text-primary-900to the section's content wrapper.--color-primary-900is already defined inassets/css/main.css(existingbrand primary scale) — no new colors, tokens, or palette changes introduced.
A mode-adaptive semantic token (e.g.
text-highlighted) was intentionallynot used here, since it would reintroduce the same mismatch against a
background that doesn't adapt with color mode.
Testing
prefers-color-scheme: darkLandingPageDownload.stories.vue)pnpm testpassesScreenshots