Add light/dark theme toggle with persistence#37
Merged
Conversation
The dashboard previously followed only the OS color-scheme setting with no way to override it. Promote the dark palette to a data-theme selector and add a header toggle that persists the choice in localStorage, falling back to prefers-color-scheme when the user has never toggled. A pre-paint inline script applies any stored choice before first paint to avoid a flash of the wrong palette, and toggling repaints the canvas gauges and sparklines immediately since they read their colors from CSS variables at draw time. Closes #12
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 join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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 dashboard's
style.cssalready defined light and dark custom properties, but the UI only followed the OSprefers-color-schemesetting with no manual override. This adds a small header toggle that lets the user flip the theme:style.css— promoted the dark palette from a bare@media (prefers-color-scheme: dark)block to a:root[data-theme="dark"]selector for explicit choices, while keeping an OS-default block scoped to:root:not([data-theme])so an untouched dashboard still follows the OS. Added styling for the toggle button and a flex header layout.index.html— added the toggle button to the header, plus a tiny pre-paint inline script that applies any stored choice before first paint to avoid a flash of the wrong palette.app.js— theme logic: reads/writeslocalStorage(pimonitor-theme), toggles thedata-themeattribute, updates the button icon/aria-label, and follows live OS changes only while no explicit choice is stored. Toggling repaints the canvas gauges/sparklines immediately, since they read their colors from CSS variables at draw time.Behavior matches the acceptance criteria: the toggle flips the theme instantly and the choice survives a reload; with no stored choice the theme still follows the OS setting.
Related Issue
Closes #12
Checklist
go test ./...passes locally) — addedTestHandler_ServesThemeToggleguarding that the toggle and storage key ship in the servedindex.htmlgo vet ./...andgolangci-lint runare cleanREADME.md; no API/config/packaging changes/api/v1/...response shapes, or a new API version was introduced instead — no API changesVerification note
Automated coverage is limited to the Go asset-serving test; the interactive behavior (instant flip, reload persistence, OS-default fallback) was reviewed by reading the code but has not been exercised in a real browser as part of this change.