fix: make target background of references accessible in dark mode#5204
fix: make target background of references accessible in dark mode#5204marcoscaceres merged 9 commits intomainfrom
Conversation
Reported in our documents that the light blueish background for targeted references is not accessible: Logius-standaarden/publicatie#57 Instead, we can use the same styling as we have for `var(--borderedblock-bg)` (which are used for examples), except make its opacity higher (5% to 30%).
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
The @media (prefers-color-scheme: dark) rule does not apply when the user toggles dark mode manually via ReSpec's theme switcher. Add a matching selector for the manual toggle. Also add a fallback value for --borderedblock-bg in case the W3C base stylesheet is not loaded.
There was a problem hiding this comment.
Pull request overview
Updates ReSpec’s core stylesheet to improve the visibility/accessibility of targeted references (#references :target) when dark mode is active (via OS preference or the manual dark mode toggle), aligning the highlight color with the “bordered block” background color used in W3C styling.
Changes:
- Add a dark-mode-specific background for
#references :targetunder@media (prefers-color-scheme: dark). - Add an equivalent override when the manual dark mode toggle is enabled via
body:has(input[name='color-scheme'][value='dark']:checked). - Add a fallback value for
--borderedblock-bgto support non-W3C profiles.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Dark mode reference :target rules were missing the pop animation that light mode has, causing inconsistent visual feedback when navigating to reference anchors.
| var(--borderedblock-bg, #303030) 70%, | ||
| transparent | ||
| ); | ||
| animation: pop 0.4s ease-in-out 0s 1; |
There was a problem hiding this comment.
Don't need to add animation separately, it's already on #references :target
There was a problem hiding this comment.
Good catch — the base #references :target rule already sets the animation, and the dark mode overrides only need to change background. The cascade handles the rest. I'll remove the animation line from both dark mode blocks.
I'll also extract the shared color-mix value into a JS const to avoid the duplication between the @media and body:has() selectors.
There was a problem hiding this comment.
Acknowledged — if the animation property is already on #references :target, adding it separately is redundant. Will check the CSS and remove the duplicate if confirmed.
- Remove redundant animation lines from dark mode overrides — the base #references :target rule already sets the animation via cascade - Extract shared color-mix value into darkRefTargetBg const (DRY) - Replace var(--borderedblock-bg, #303030) 70% with #eaf3ff 15% — W3C dark.css defines --borderedblock-bg as rgba(255,255,255,.05), making 70% of that near-invisible (~1.05:1 contrast). Using the light mode base color at 15% opacity gives a visible highlight on dark backgrounds.
Co-authored-by: Marcos Cáceres <marcos@marcosc.com>
|
@copilot Can you confirm all your feedback has been addressed? Can you fix anything that was not addressed? |
Summary
#references :targethighlight background@media (prefers-color-scheme: dark)and the manual dark mode toggle--borderedblock-bgCSS variable (for non-W3C profiles)Based on @TimvdLippe's work in #5165, with additional fixes for the manual toggle selector and CSS variable fallback.
Closes #5165
Test plan
Modified Web platform tests— CSS-only change, no observable behavior change beyond styling