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/options/options.css
+61 -4
View File
@@ -22,6 +22,7 @@
carry over unchanged. Toast text + danger-button hover adjusted for
light-bg readability.
────────────────────────────────────────────────────────────────────── */
/* OS-follow light mode */
@media (prefers-color-scheme: light) {
:root {
--bg: #f6f4ed;
@@ -35,13 +36,69 @@
--cream: #b8861a;
--danger: #b53a2b;
}
/* Toast — keep readable when its background is solid accent / danger */
.opt-toast { color: #fff; }
.opt-toast[data-tone="error"] { color: #fff; }
.opt-btn--danger:hover { color: #fff; }
}
/* Danger button hover — text flips to white when bg goes red */
.opt-btn--danger:hover { color: #fff; }
/* Manual override — force LIGHT */
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"] .opt-toast { color: #fff; }
html[data-theme="light"] .opt-toast[data-tone="error"] { color: #fff; }
html[data-theme="light"] .opt-btn--danger:hover { color: #fff; }
/* Manual override — force 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"] .opt-toast { color: var(--bg); }
html[data-theme="dark"] .opt-toast[data-tone="error"] { color: var(--cream); }
html[data-theme="dark"] .opt-btn--danger:hover { color: var(--cream); }
/* Theme toggle UI (v0.5.0 Phase 2) */
.opt-theme-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}
.opt-theme-row label {
flex: 1;
min-width: 90px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
font-size: 12px;
font-weight: 500;
margin: 0;
padding: 8px 12px;
border: 1px solid var(--bg-row-hi);
border-radius: var(--radius);
background: var(--bg-row);
cursor: pointer;
transition: border-color 120ms ease-out;
}
.opt-theme-row label:hover {
border-color: var(--accent);
}
.opt-theme-row input[type="radio"] {
margin: 0;
accent-color: var(--accent);
}
.opt-theme-row label:has(input:checked) {
border-color: var(--accent);
background: var(--bg-row-hi);
}
* { box-sizing: border-box; }