Repository navigation
fix(chrome): show monitor icon for system theme preference - #1482
Merged
Merged
Conversation
Pre-fix the topbar theme toggle's icon only swapped between sun (light) and moon (dark), so operators in `system` mode saw whichever of the two matched their OS preference and had no way to tell the toggle was set to "follow OS" instead of pinned. The cycle is light → dark → system → light, but two-thirds of the visual states were ambiguous and the next click was a coin flip. Add a `monitor` Lucide placeholder, gate icon visibility on a new `<html data-theme-pref="light|dark|system">` attribute (mirror of `localStorage['sbpp-theme']`), and write the attribute synchronously from all five anti-FOUC bootloader copies so the right icon paints on first frame. The class-vs-attribute split is deliberate: `html.dark` stays the *resolved* theme (what's painted, what CSS tokens cascade against); `data-theme-pref` is the *choice* (what the toggle's icon reflects). Bonus accessibility: `applyTheme()` now rewrites the toggle's `aria-label` per mode so screen-reader users hear "Color theme: system (auto). Click to switch to light." rather than the static "Toggle color theme" they'd been stuck with. This is the deferred follow-up from #1185 (which shipped the two-state sun/moon swap and explicitly left "system" indicator as a follow-up).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
The topbar theme toggle's icon only swapped between sun (light) and moon (dark) —
systemmode showed whichever icon matched the OS preference, so operators following OS dark mode saw the moon and had no way to tell their preference was actuallysystem, not pinneddark. The cycle is light → dark → system → light; two-thirds of the visual states were ambiguous and the next click was a coin flip.monitorLucide placeholder; gate icon visibility on a new<html data-theme-pref="light|dark|system">attribute (mirror oflocalStorage['sbpp-theme']).core/header.tpl,page_kickit.tpl,page_blockit.tpl,page_uploadfile.tpl,updater.tpl) write the attribute synchronously before first paint so the right icon lands on frame 1 — no FOUC.applyTheme()rewrites the toggle'saria-labelper mode ("Color theme: system (auto). Click to switch to light.") — screen-reader users get the same indicator sighted users get from the icon swap.The class-vs-attribute split is deliberate:
html.darkstays the resolved theme (what's painted, what CSS tokens cascade against);data-theme-prefis the choice (what the toggle's icon reflects).Deferred follow-up from #1185 (which shipped the two-state sun/moon swap and explicitly left the system indicator as a follow-up).
Test plan
Quality gates ran green locally:
Adversarial-review fixes folded in
A reviewer pass caught three issues, all addressed before opening this PR: