Add light/dark theming with an OS-aware toggle - #2
Merged
Conversation
Introduce a dark navy palette (cyan/sky accent) alongside the original light theme, selectable via a persistent toggle. - Define every color token as light-dark(light, dark); :root defaults to color-scheme: light dark so first paint follows the OS with no flash - Add a top-right toggle that overrides the OS choice and persists it in localStorage (data-theme on <html>); ~20 lines in app.js, no CSP changes - Switch --page-gradient via media query + data-theme (not a color, so it can't use light-dark()) - Restyle buttons: pill primary with a cyan->sky gradient and glow, subtle-border secondary (reset/print), cyan-outline add button, rounded remove icon; --ui-border/--ui-hover work in both themes - 400-level badge colors for dark; add space between custom-table cards and the input textarea print.css left light for paper.
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
1 participant
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.
Introduce a dark navy palette (cyan/sky accent) alongside the original light theme, selectable via a persistent toggle.
What
light-dark()tokens — every color custom property now carries both a light and dark value.:rootdefaults tocolor-scheme: light dark, so first paint follows the OS with no flash.localStorage(data-themeon<html>). ~20 lines inapp.js, no CSP changes, no inline scripts.--page-gradientswitched via media query +data-theme(it's not a color, so it can't uselight-dark()).--ui-border/--ui-hovertokens render correctly in both themes.Notes
print.cssleft light (it's for paper).light-dark()and:has()/color-schemeare Baseline: Widely Available.