a11y/theme: --app-primary tokens not applied when explicit dark theme selected on light-OS machine #101

New issue

Closed

opened 2026-04-14 15:44:29 -07:00 by pyr0ball · 0 comments

pyr0ball commented

2026-04-14 15:44:29 -07:00

Owner

In peregrine.css, the --app-primary, --app-primary-light, and --app-accent token overrides exist only under @media (prefers-color-scheme: dark). They are missing from the [data-theme="dark"] attribute selector.

Result: a user on a light-OS machine (system prefers light) who explicitly selects the dark theme via the UI theme picker will not get the correct token values — they will use the light-mode defaults instead.

Fix: Duplicate the dark-mode token block under [data-theme="dark"] in peregrine.css:

[data-theme="dark"] {
  --app-primary: /* dark value */;
  --app-primary-light: /* dark value */;
  --app-accent: /* dark value */;
}

Also audit for any other tokens that have the same gap.

In `peregrine.css`, the `--app-primary`, `--app-primary-light`, and `--app-accent` token overrides exist only under `@media (prefers-color-scheme: dark)`. They are missing from the `[data-theme="dark"]` attribute selector. Result: a user on a light-OS machine (system prefers light) who explicitly selects the dark theme via the UI theme picker will not get the correct token values — they will use the light-mode defaults instead. **Fix:** Duplicate the dark-mode token block under `[data-theme="dark"]` in `peregrine.css`: ```css [data-theme="dark"] { --app-primary: /* dark value */; --app-primary-light: /* dark value */; --app-accent: /* dark value */; } ``` Also audit for any other tokens that have the same gap.