Skip to content

Keep toggles and colour swatches visible under forced colours #900

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
enaboapps merged 4 commits into from
Sep 25, 2026
Merged

Keep toggles and colour swatches visible under forced colours #900

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6384e5e
Keep toggles and colour swatches visible under forced colours
OwenMcGirr Sep 25, 2026
b3d5d28
Close the remaining forced-colours gaps
OwenMcGirr Sep 25, 2026
40c75cc
Give the white swatch the same high-contrast edge in dark themes
OwenMcGirr Sep 25, 2026
0eff3c2
Merge branch 'main' into 890-dark-final-pass
enaboapps Sep 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions src/ui/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -603,10 +603,34 @@ fieldset:disabled :is(.color-options, .scanner-colours) label:not(:has(input:che
.btn { transition: none; }
}

/* Forced colours flatten backgrounds, which would erase the toggle track and
knob and turn every colour swatch into the same empty circle. Draw the
toggle with system colours, and let swatches and the highlight sample keep
their real colours, since the colour is the choice being made. */
@media (forced-colors: active) {
.btn.nav-button[data-active="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
/* Focus must still read as focus on the current page's own button. */
.btn.nav-button[data-active="true"]:focus-visible { outline: 3px solid CanvasText; outline-offset: 3px; }
.toggle, .toggle::after { forced-color-adjust: none; }
.toggle { border: 2px solid CanvasText; background: Canvas; }
.toggle::after { top: 1px; left: 1px; background: CanvasText; }
.toggle-row input:checked + .toggle { border-color: Highlight; background: Highlight; }
.toggle-row input:checked + .toggle::after { background: HighlightText; }
/* Same specificity as the checked rules and later, so disabled wins. */
.toggle-row[data-disabled="true"] input + .toggle { border-color: GrayText; background: Canvas; }
.toggle-row[data-disabled="true"] input + .toggle::after { background: GrayText; }
.toggle-row[data-disabled="true"] input:checked + .toggle { background: GrayText; }
.toggle-row[data-disabled="true"] input:checked + .toggle::after { background: Canvas; }
/* Opting out of forced colours would also keep the page's focus blue. */
.toggle-row input:focus-visible + .toggle { outline-color: CanvasText; }
.color-swatch, .scanner-sample { forced-color-adjust: none; }
/* A white or yellow swatch would vanish on a light Canvas without an edge. */
.color-swatch, .color-swatch.white { border: 2px solid CanvasText; }
.color-options label:has(input:checked), .scanner-colours label:has(input:checked) { border-color: Highlight; }
.switch-practice-blocks li[data-selected="true"] { border: 4px solid Highlight; }
/* The step rail is drawn with backgrounds only. */
.setup-progress span { forced-color-adjust: none; background: GrayText; }
.setup-progress span[data-active="true"] { background: Highlight; }
}

/* --- Responsive --------------------------------------------------------------- */
Expand Down
Loading