fix(dark-mode): white-on-white text on highlighted/active items - #123
Conversation
…items
Several highlighted ("active") items rendered white text on a near-white
fill in dark mode. Two root causes, both fixed by using theme-aware tokens:
1. background: var(--fg-primary) + a FIXED white text (#ffffff, or
var(--bg-primary, #fff) where --bg-primary is an undefined token that
silently resolves to #fff). --fg-primary flips to near-white in dark
mode, so the fill and the text were both light. Fixed: text uses
var(--bg-canvas), which inverts with the fill (light in light mode,
dark in dark mode), matching the existing .onboarding-modal__step--current.
- .explore__filter--active, .explore__view-btn--active (explore.css)
- .sx-menu__item--active + its icon (settings-page.css)
- workspace active items x5 (workspace.css)
2. background: rgba(255,255,255,.92) (a fixed near-white image-overlay pill)
+ color: var(--fg-primary), which flips near-white in dark mode. Fixed:
text uses the invariant var(--color-primary) since the surface is invariant.
- .image-edit-overlay__btn--ghost (components.css)
- .profile-banner-upload__btn--ghost (profile-inline-edit.css)
Verified via computed styles in dark mode: each is now near-black text on
its light fill. Build compiles.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?s=60&v=4){kind=small}
There was a problem hiding this comment.
Claude Code Review
This repository is configured for manual code reviews. Comment @claude review to trigger a review and subscribe this PR to future pushes, or @claude review once for a one-time review.
Tip: disable this comment in your organization's Code Review settings.
2 participants
What
In dark mode, several highlighted ("active") items showed white text on a near-white fill — unreadable. Fixed all of them.
Root cause (two flavours)
A.
background: var(--fg-primary)+ fixed-white text.--fg-primaryflips to near-white (#f5f5f7) in dark mode, so a fixed white text became white-on-white. The white was sometimes literal (#ffffff) and sometimes hidden behind an undefined token:var(--bg-primary, #fff)—--bg-primaryisn't defined intokens.css, so it silently resolves to#fff. Fixed by usingvar(--bg-canvas), which inverts with the fill (matching the existing correct.onboarding-modal__step--current)..explore__filter--active,.explore__view-btn--active.sx-menu__item--active(+ its icon)B. Fixed near-white image-overlay pill +
var(--fg-primary)text. The "ghost" avatar/banner edit buttons have a fixedrgba(255,255,255,.92)surface, but their text used--fg-primary(near-white in dark mode). Fixed by using the invariantvar(--color-primary)since the surface itself is invariant..image-edit-overlay__btn--ghost.profile-banner-upload__btn--ghost12 declarations across 5 CSS files. No raw hex added (a couple of
#ffffff/#fffliterals removed in favour of tokens).Verification
next buildcompilesdata-theme="dark"): now near-black text (rgb(24,24,27)/rgb(17,17,17)) on its light fill (rgb(245,245,247)/ near-white). Was white-on-white before.Related finding (not fixed here)
The same undefined tokens are also used as backgrounds in a few places:
background: var(--bg-primary, var(--bg-base, #fff))(both undefined → white surface) incontext-updates.css:134,cert-detail.css:2011/2086. Those would render white surfaces in dark mode (a different symptom than the white-text-on-highlight reported here). Happy to fix as a follow-up — it needs a small judgment call (define the tokens vs. swap each to--bg-elevated).🤖 Generated with Claude Code