Repository navigation
feat: light theme with runtime Light/Dark toggle - #11
Merged
Merged
Conversation
Replace the header's no-op "..." button with a text toggle that names the
theme a click switches to ("Light" while dark, "Dark" while light). The
switch is in place: no reload, and the connection, recording, data and
view are untouched.
Only the neutral tokens (canvas/panel/surface/border/fg/muted) change, via
:root[data-theme="light"] in globals.css; success/danger (start/stop),
accent and amber are identical in both themes. color-scheme follows the
theme so native inputs and scrollbars match.
The choice persists under multimeter-live:theme and is applied by an
inline pre-paint script in layout.tsx, so a stored light theme never
flashes dark. Defaults to dark; storage errors fall back to dark.
The chart's canvas neutrals (axes, grid, tooltip) come from a per-theme
palette; theme recreates the chart and is also a redraw dep so it repaints
while disconnected. Bump version to 2.1.0.
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
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
Adds a light theme. The header's
⋮button didn't do anything; it's now a text toggle that switches themes at runtime, with no page reload.localStoragekeymultimeter-live:theme). An inline pre-paint script inlayout.tsxapplies it, so a stored light theme never flashes dark. Defaults to dark; the OS color-scheme preference is not followed. If storage is blocked, it falls back to dark and the toggle still works for the session.How
app/globals.css::root[data-theme="light"]redefines the 6 neutral@themetokens. Tailwind v4 utilities resolve viavar(--color-*), so every component restyles without edits.color-schemefollows the theme, which covers native inputs, selects and scrollbars.app/page.tsx:themestate plustoggleTheme; theAppHeaderbutton replacesMoreVertical.components/RealtimeChart.tsx: canvas neutrals come from a per-themeCHART_NEUTRALSpalette.themerecreates the chart and is also a redraw dependency, so the chart repaints while disconnected.Testing
npm run lint,npx tsc --noEmit,npm run check,npm run build,npm run fallow: all pass; fallow reports no new findings.DOMContentLoaded; storage-blocked fallback; no hydration warnings.Known trade-off
Green/amber text on white has low contrast (
#22c55e≈ 2.3:1). It's kept on purpose, so start/stop colors stay identical across themes. The PWAtheme_coloralso stays dark.