ranger/rangerhq-tuner
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 6 Wiki Activity

feat(v0.5.0-prep): manual theme toggle (Phase 2)

Browse Source 
Adds an Auto / Dark / Light radio group to the Options page that
overrides the OS `prefers-color-scheme` setting. Stored in
chrome.storage.local under tuner.theme. Defaults to Auto.

Architecture:
- src/lib/theme.js (new, ~55 lines) — getTheme/setTheme/applyTheme/initTheme
  helpers. applyTheme sets/removes `data-theme` attribute on <html>;
  initTheme reads storage + applies.
- popup.js + newtab.js + options.js: call initTheme() FIRST in their
  init() so the theme paints before anything else. All three also
  listen for chrome.storage.onChanged on the THEME_KEY and live-apply
  changes — pick Light in Options, popup + newtab flip instantly.
- options.html: new 'Appearance' card with 3 radio buttons (Auto/Dark/
  Light) above the existing Playback card.
- options.css: styled radio group (pill-shaped, accent border on
  :checked, hover state). Plus the Auto/Dark/Light CSS overrides
  themselves.
- popup.css, newtab.css, options.css: each gets html[data-theme=light]
  and html[data-theme=dark] blocks that override :root vars. Attribute
  selector specificity beats both :root and the @media :root, so the
  manual override wins when set.

UX:
- Default = Auto (follows OS via existing @media block)
- Pick Dark → overrides OS, forces dark palette
- Pick Light → overrides OS, forces light palette
- Selection persists across reloads, syncs across all three surfaces

7 files, ~150 lines added. No new permissions, no new dependencies.

Bundled with v0.4.1-prep back-link + Phase 1 OS-follow light mode for
the v0.5.0 release.
This commit is contained in:
David Keane
2026-06-10 00:13:07 +01:00
parent 5510cebde1
commit d0d5e76abe
8 changed files with 240 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/popup/popup.css
+26 -4
View File
@@ -25,6 +25,8 @@
preserving the brand green as the accent. Every existing rule that
uses the var(--*) tokens keeps working unchanged.
────────────────────────────────────────────────────────────────────── */
/* Shared light palette block — used as a mixin by the @media (OS-follow)
rule below AND by the html[data-theme="light"] manual override. */
@media (prefers-color-scheme: light) {
:root {
--bg: #f6f4ed; /* cream-leaning off-white */
@@ -38,16 +40,36 @@
--cream: #b8861a; /* darker amber — readable on light bg */
--danger: #b53a2b; /* darker red — readable on light bg */
}
/* State pills — light-mode adjustments so playing/buffering states
stay readable. The "playing" green stays bright but text flips white;
"buffering" cream gets dark text since the cream is now amber. */
.tuner-state[data-state="playing"] { color: #fff; }
.tuner-state[data-state="buffering"] { color: #fff; }
.tuner-state[data-state="error"] { color: #fff; }
.btn-primary[aria-pressed="true"] { color: #fff; }
}
/* Manual override — force LIGHT palette regardless of OS. The attribute
selector beats both :root and the @media rule's :root on specificity. */
html[data-theme="light"] {
--bg: #f6f4ed; --bg-soft: #ece5d2; --bg-row: #ddd6c0; --bg-row-hi: #c8c0a8;
--fg: #2a2f28; --fg-muted: #6a7064; --accent: #2a7d3e; --accent-dim: #6dbf7a;
--cream: #b8861a; --danger: #b53a2b;
}
html[data-theme="light"] .tuner-state[data-state="playing"] { color: #fff; }
html[data-theme="light"] .tuner-state[data-state="buffering"] { color: #fff; }
html[data-theme="light"] .tuner-state[data-state="error"] { color: #fff; }
html[data-theme="light"] .btn-primary[aria-pressed="true"] { color: #fff; }
/* Manual override — force DARK palette regardless of OS. Overrides the
@media block when OS is light but user explicitly wants dark. */
html[data-theme="dark"] {
--bg: #0f1411; --bg-soft: #1a221c; --bg-row: #1f2823; --bg-row-hi: #2a3530;
--fg: #e8e4d4; --fg-muted: #97a094; --accent: #6dbf7a; --accent-dim: #2a7d3e;
--cream: #f4e9b7; --danger: #c9685b;
}
html[data-theme="dark"] .tuner-state[data-state="playing"] { color: var(--bg); }
html[data-theme="dark"] .tuner-state[data-state="buffering"] { color: var(--bg); }
html[data-theme="dark"] .tuner-state[data-state="error"] { color: var(--cream); }
html[data-theme="dark"] .btn-primary[aria-pressed="true"] { color: var(--bg); }
* { box-sizing: border-box; }
html, body {