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

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.
feat(v0.5.0-prep): light mode support across all three surfaces
2026-06-10 00:13:07 +01:00 · 2026-06-09 23:54:09 +01:00 · 2026-06-09 23:51:11 +01:00 · 2026-06-09 23:42:42 +01:00 · 2026-06-09 22:15:17 +01:00 · 2026-06-09 22:14:15 +01:00
10 changed files with 401 additions and 11 deletions
@@ -7,11 +7,60 @@ Format: [Keep a Changelog 1.1.0](https://keepachangelog.com/en/1.1.0/) — versi
 ## [Unreleased]
-### Planned — Tier 3 (Chrome Web Store submission)
+### Planned — Tier 2 polish (next)
- Listing assets: 1280x800 screenshots, 440x280 promo tile
+- Light mode support (`prefers-color-scheme` + flipped palette across popup / NewTab / Options)
- Privacy policy URL published at `davidtkeane.com/rangerhq-tuner/privacy`
+- `.m3u` parser alongside `.pls` to widen future-adapter compatibility
- 2-Step Verification on Google account
+- Station artwork lazy-load + fallback to family helmet
- $5 dev fee + submission
+- Better error UI for failed streams ("Stream unavailable, try another")
 - `.crx` packaging instructions in README for sideload users
 ---
 ## [0.4.0] — 2026-06-09 — First-run UX hint
 First post-launch update, shipped the same day v0.3.0 went LIVE on the Chrome Web Store. Pure UX polish — zero new permissions, zero new code dependencies, zero behaviour change for existing users.
 ### Added — Discoverable "pick a station to begin" affordance
 Triggered by David's own 30-second panic on first Web Store install (uninstalled the dev build, installed from the Web Store fresh, hit Play, got nothing, then realised "ah, I need to pick a station first"). The product worked correctly — the dev build had a seeded station from hours of testing, the fresh install does not — but the 30-second panic exposed a real first-run-UX gap.
 **Two layered cues, both pure CSS driven by a `body.is-first-run` class:**
 1. **Subtle accent-green glow pulses** around the station list (popup) and the Quick Stations chip row (NewTab). Uses a 2.4-second `box-shadow` keyframe at low alpha (0.18-0.25) — visible but not noisy.
 2. **Bouncing ↓ arrow** appended to the "Pick a station to begin" text in both surfaces. Uses an `::after` pseudo-element with a 1.8-second `translateY` keyframe.
 The `is-first-run` class is toggled by a tiny `reflectFirstRunHint()` function called from:
 - `init()` once stations + `currentStation` are resolved
 - `onPickStation()` the moment a user picks
 - the `chrome.storage.onChanged` listener when another surface picks (so the hint disappears on both surfaces simultaneously via cross-surface sync)
 Existing users with a stored `tuner.currentStationId` never see either cue — the class only attaches when `currentStation` is null.
 ### Files touched
 - `src/popup/popup.css` (+35 lines — keyframes + `.is-first-run` rules)
 - `src/popup/popup.js` (+11 lines — `reflectFirstRunHint()` + 3 call sites)
 - `src/newtab/newtab.css` (+36 lines — same idea, NewTab-namespaced)
 - `src/newtab/newtab.js` (+10 lines — same pattern)
 Total: 4 files, +92 lines, 0 deletions.
 ### Not changed
 - No new permissions
 - No new host_permissions
 - No new external libraries
 - No change to `manifest.json` beyond the version bump and CHANGELOG-referenced URL
 - No data migration required (no storage shape change)
 ### Same-day context
 This update ships the same day:
 - v0.3.0 went LIVE on the Chrome Web Store (~17:08 Dublin, ~15.5h after submission)
 - RangerHQ Radio v1.0.0 stability milestone went LIVE on WordPress.org (~21:51 Dublin)
 - David received a PhD-prep signal from his Research in Computing lecturer at NCI Dublin
 A solid day.
 ---
@@ -1,7 +1,7 @@
 {
  "manifest_version": 3,
  "name": "RangerHQ Tuner",
-  "version": "0.3.0",
+  "version": "0.4.0",
  "description": "Lightweight SomaFM radio player. Logs what plays. One-click search to Spotify, YouTube, Apple Music, Bandcamp. No telemetry.",
  "author": "David Keane",
  "homepage_url": "https://davidtkeane.com/rangerhq-tuner",
@@ -0,0 +1,55 @@
 // RangerHQ Tuner — Theme helpers (v0.5.0)
 //
 // Three modes:
 //   auto   — follow OS via @media (prefers-color-scheme: light)
 //   dark   — force dark regardless of OS
 //   light  — force light regardless of OS
 //
 // Stored in chrome.storage.local under `tuner.theme`. Default: auto.
 //
 // Application strategy: set/remove `data-theme` attribute on <html>.
 //   - "auto" → attribute removed → @media in each stylesheet decides
 //   - "dark" → data-theme="dark" → CSS forces dark vars
 //   - "light" → data-theme="light" → CSS forces light vars
 //
 // Used from popup.js, newtab.js, and options.js on init + on cross-surface
 // sync.
 export const THEME_KEY = 'tuner.theme';
 export const THEME_AUTO  = 'auto';
 export const THEME_DARK  = 'dark';
 export const THEME_LIGHT = 'light';
 export const THEME_DEFAULT = THEME_AUTO;
 export const VALID_THEMES = [THEME_AUTO, THEME_DARK, THEME_LIGHT];
 /** Read the stored theme preference, falling back to "auto". */
 export async function getTheme() {
  if (typeof chrome === 'undefined' || !chrome.storage?.local) return THEME_DEFAULT;
  const o = await chrome.storage.local.get(THEME_KEY);
  const v = o[THEME_KEY];
  return VALID_THEMES.includes(v) ? v : THEME_DEFAULT;
 }
 /** Persist a theme preference. Any cross-surface listeners will pick it up. */
 export async function setTheme(theme) {
  if (!VALID_THEMES.includes(theme)) theme = THEME_DEFAULT;
  if (typeof chrome === 'undefined' || !chrome.storage?.local) return theme;
  await chrome.storage.local.set({ [THEME_KEY]: theme });
  return theme;
 }
 /** Apply a theme to the current document. Pass "auto" to clear the override. */
 export function applyTheme(theme) {
  const t = VALID_THEMES.includes(theme) ? theme : THEME_DEFAULT;
  const html = document.documentElement;
  if (t === THEME_AUTO) {
    html.removeAttribute('data-theme');
  } else {
    html.setAttribute('data-theme', t);
  }
 }
 /** Convenience: read the stored theme and apply it. */
 export async function initTheme() {
  applyTheme(await getTheme());
 }
@@ -17,8 +17,58 @@
  --danger:     #c9685b;
  --radius:     8px;
  --maxw:       760px;
  --watermark-opacity: 0.025;
 }
 /* ──────────────────────────────────────────────────────────────────────
   Light mode (v0.5.0) — auto-follows OS theme. Same approach as popup:
   override :root vars so every existing rule using var(--*) keeps
   working unchanged. Watermark opacity bumped slightly since the
   helmet contrasts more against light bg.
   ────────────────────────────────────────────────────────────────────── */
 /* OS-follow light mode */
@media (prefers-color-scheme: light) {
  :root {
    --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;
    --watermark-opacity: 0.04;
  }
  .nt-state-pill[data-state="playing"]   { color: #fff; }
  .nt-state-pill[data-state="buffering"] { color: #fff; }
  .nt-state-pill[data-state="error"]     { color: #fff; }
  .nt-btn--primary[aria-pressed="true"]  { 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; --watermark-opacity: 0.04;
 }
 html[data-theme="light"] .nt-state-pill[data-state="playing"]   { color: #fff; }
 html[data-theme="light"] .nt-state-pill[data-state="buffering"] { color: #fff; }
 html[data-theme="light"] .nt-state-pill[data-state="error"]     { color: #fff; }
 html[data-theme="light"] .nt-btn--primary[aria-pressed="true"]  { 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; --watermark-opacity: 0.025;
 }
 html[data-theme="dark"] .nt-state-pill[data-state="playing"]   { color: var(--bg); }
 html[data-theme="dark"] .nt-state-pill[data-state="buffering"] { color: var(--bg); }
 html[data-theme="dark"] .nt-state-pill[data-state="error"]     { color: var(--cream); }
 html[data-theme="dark"] .nt-btn--primary[aria-pressed="true"]  { color: var(--bg); }
 * { box-sizing: border-box; }
 html, body {
@@ -40,7 +90,7 @@ body::before {
  background-repeat: no-repeat;
  background-position: center;
  background-size: min(60vh, 600px);
-  opacity: 0.025;
+  opacity: var(--watermark-opacity);
  pointer-events: none;
  z-index: 0;
 }
@@ -13,6 +13,7 @@ import {
  searchUrls, formatRelativeTime,
  entrySignature,
 } from '../lib/history.js';
 import { THEME_KEY, THEME_DEFAULT, initTheme, applyTheme } from '../lib/theme.js';
 const els = {
  // Clock
@@ -80,7 +81,11 @@ init().catch(err => {
 });
 async function init() {
-  // Clock first — visible even before stations load.
+  // Theme first — apply stored preference before anything paints to avoid
  // a brief dark flash if the user has picked light.
  await initTheme();
  // Clock — visible even before stations load.
  tickClock();
  clockTimer = setInterval(tickClock, 1000); // 1 Hz — live seconds
@@ -181,6 +186,10 @@ async function init() {
  chrome.storage.onChanged.addListener(async (changes, area) => {
    if (area !== 'local') return;
    if (changes[THEME_KEY]) {
      applyTheme(changes[THEME_KEY].newValue || THEME_DEFAULT);
    }
    if (changes[STORAGE_KEYS.currentId] && stations.length) {
      const newId = changes[STORAGE_KEYS.currentId].newValue;
      currentStation = stations.find(s => s.id === newId) || null;
@@ -16,6 +16,91 @@
  --radius:     6px;
 }
 /* ──────────────────────────────────────────────────────────────────────
   Light mode (v0.5.0) — auto-follows OS theme. Same approach as popup
   + newtab: flip the :root vars only. Existing rules using var(--*)
   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;
    --bg-soft:    #ece5d2;
    --bg-row:     #ddd6c0;
    --bg-row-hi:  #c8c0a8;
    --fg:         #2a2f28;
    --fg-muted:   #6a7064;
    --accent:     #2a7d3e;
    --accent-dim: #6dbf7a;
    --cream:      #b8861a;
    --danger:     #b53a2b;
  }
  .opt-toast                    { color: #fff; }
  .opt-toast[data-tone="error"] { color: #fff; }
  .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; }
 html, body {
@@ -40,7 +125,29 @@ html, body {
 .opt-brand {
  display: flex;
  align-items: center;
-  gap: 12px;
+  gap: 10px;
  text-decoration: none;
  color: inherit;
  padding: 4px 8px;
  margin: -4px -8px;
  border-radius: var(--radius);
 }
 .opt-brand:hover {
  background: var(--bg-row);
 }
 .opt-brand:hover .opt-back {
  color: var(--accent);
  transform: translateX(-2px);
 }
 .opt-back {
  font-size: 18px;
  color: var(--fg-muted);
  line-height: 1;
  font-weight: 400;
  transition: color 120ms ease-out, transform 120ms ease-out;
 }
 .opt-helmet {
@@ -9,10 +9,11 @@
 <body>
  <header class="opt-header">
-    <div class="opt-brand">
+    <a href="../newtab/newtab.html" class="opt-brand" title="Back to RangerHQ Tuner">
      <span class="opt-back" aria-hidden="true">←</span>
      <img src="../assets/img/ranger.png" alt="" class="opt-helmet">
      <h1>RangerHQ Tuner — Options</h1>
-    </div>
+    </a>
    <span class="opt-version" id="opt-version">v—</span>
  </header>
@@ -59,6 +60,30 @@
      </div>
    </section>
    <section class="opt-card">
      <h2>Appearance</h2>
      <div class="opt-row">
        <label>
          Theme
          <span class="opt-help">Auto follows your OS setting. Dark / Light overrides it.</span>
        </label>
        <div class="opt-theme-row" role="radiogroup" aria-label="Theme">
          <label>
            <input type="radio" name="opt-theme" value="auto" id="opt-theme-auto">
            <span>Auto</span>
          </label>
          <label>
            <input type="radio" name="opt-theme" value="dark" id="opt-theme-dark">
            <span>Dark</span>
          </label>
          <label>
            <input type="radio" name="opt-theme" value="light" id="opt-theme-light">
            <span>Light</span>
          </label>
        </div>
      </div>
    </section>
    <section class="opt-card">
      <h2>Playback</h2>
      <div class="opt-row opt-row--inline">
@@ -9,6 +9,10 @@ import {
  getHistoryCap, setHistoryCap,
  clearHistory, clearFavourites, clearAll,
 } from '../lib/history.js';
 import {
  THEME_KEY, THEME_DEFAULT, VALID_THEMES,
  getTheme, setTheme, applyTheme,
 } from '../lib/theme.js';
 const STORAGE_KEYS = {
  stations:    'tuner.stationsCache',
@@ -39,6 +43,11 @@ init().catch(err => {
 async function init() {
  els.version.textContent = `v${chrome.runtime.getManifest().version}`;
  // Theme — apply stored preference + wire the radio group + listen for
  // cross-surface changes (popup/newtab pick a theme → Options reflects).
  await initThemeUI();
  await refreshStats();
  await refreshPlayback();
@@ -86,6 +95,12 @@ async function init() {
  // Refresh stats live if storage changes from another surface
  chrome.storage.onChanged.addListener((changes, area) => {
    if (area !== 'local') return;
    if (changes[THEME_KEY]) {
      const v = changes[THEME_KEY].newValue || THEME_DEFAULT;
      applyTheme(v);
      const radio = document.querySelector(`input[name="opt-theme"][value="${v}"]`);
      if (radio) radio.checked = true;
    }
    if (Object.keys(changes).some(k => k.startsWith('tuner.'))) {
      refreshStats();
      refreshPlayback();
@@ -93,6 +108,23 @@ async function init() {
  });
 }
 /** Apply the stored theme, check the matching radio, wire change handlers. */
 async function initThemeUI() {
  const current = await getTheme();
  applyTheme(current);
  const checked = document.querySelector(`input[name="opt-theme"][value="${current}"]`);
  if (checked) checked.checked = true;
  for (const r of document.querySelectorAll('input[name="opt-theme"]')) {
    r.addEventListener('change', async (e) => {
      const v = e.target.value;
      if (!VALID_THEMES.includes(v)) return;
      await setTheme(v);
      applyTheme(v);
      toast(`Theme: ${v}`);
    });
  }
 }
 async function refreshStats() {
  const [history, favs, all] = await Promise.all([
    getHistory(),
@@ -14,8 +14,62 @@
  --cream:      #f4e9b7;
  --danger:     #c9685b;
  --radius:     6px;
  /* First-run hint pulse colour (RGB tuple — alpha applied in keyframes). */
  --pulse-rgb:  109, 191, 122;
 }
 /* ──────────────────────────────────────────────────────────────────────
   Light mode (v0.5.0) — auto-follows OS theme via prefers-color-scheme.
   Flips backgrounds + foregrounds to a cream-leaning palette while
   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 */
    --bg-soft:    #ece5d2;    /* slightly darker for header bars */
    --bg-row:     #ddd6c0;    /* hover background */
    --bg-row-hi:  #c8c0a8;    /* active row background */
    --fg:         #2a2f28;    /* dark forest-green-leaning text */
    --fg-muted:   #6a7064;    /* muted secondary text */
    --accent:     #2a7d3e;    /* darker brand green for primary contrast */
    --accent-dim: #6dbf7a;    /* lighter brand green for fills */
    --cream:      #b8861a;    /* darker amber — readable on light bg */
    --danger:     #b53a2b;    /* darker red — readable on light bg */
  }
  .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 {
@@ -4,6 +4,7 @@
 import { TARGETS, TYPES } from '../lib/messages.js';
 import { listAllStations, getSource } from '../sources/index.js';
 import { THEME_KEY, THEME_DEFAULT, initTheme, applyTheme } from '../lib/theme.js';
 const els = {
  statePill:  document.getElementById('state-pill'),
@@ -42,6 +43,10 @@ init().catch(err => {
 });
 async function init() {
  // 0. Apply theme preference (v0.5.0) before anything paints, to avoid
  // a brief dark flash if the user has picked light.
  await initTheme();
  // 1. Hydrate UI from cached state so the popup renders fast.
  const stored = await chrome.storage.local.get(Object.values(STORAGE_KEYS));
  if (typeof stored[STORAGE_KEYS.volume] === 'number') {
@@ -118,6 +123,10 @@ async function init() {
  chrome.storage.onChanged.addListener((changes, area) => {
    if (area !== 'local') return;
    if (changes[THEME_KEY]) {
      applyTheme(changes[THEME_KEY].newValue || THEME_DEFAULT);
    }
    if (changes[STORAGE_KEYS.currentId] && stations.length) {
      const newId = changes[STORAGE_KEYS.currentId].newValue;
      currentStation = stations.find(s => s.id === newId) || null;
Author	SHA1	Message	Date
ranger	d0d5e76abe	feat(v0.5.0-prep): manual theme toggle (Phase 2) 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.	2026-06-10 00:13:07 +01:00
ranger	5510cebde1	feat(v0.5.0-prep): light mode support across all three surfaces Implements the v0.4.0-plan-noted light mode using `@media (prefers-color-scheme: light)` blocks that override the :root CSS variables. The extension now auto-follows the user's OS theme — no toggle, no setting, no preference UI required (Phase 2 toggle deferred to a later release if anyone asks for it). Light-mode palette preserves brand identity: --bg #f6f4ed cream-leaning off-white --bg-soft #ece5d2 header / footer bars --bg-row #ddd6c0 hover backgrounds --bg-row-hi #c8c0a8 active rows --fg #2a2f28 dark forest-green-leaning text --fg-muted #6a7064 secondary text --accent #2a7d3e darker brand green (primary on light) --accent-dim #6dbf7a lighter brand green (secondary) --cream #b8861a darker amber — readable on light bg --danger #b53a2b darker red — readable on light bg Every existing CSS rule using var(--*) tokens carries over unchanged. The only surface-specific overrides are: - State pills (popup + newtab) — text colour flips to white when the background becomes solid accent/cream/danger - Primary play button (pressed state) — text colour flips - Helmet watermark on NewTab — opacity bumped 0.025 → 0.04 via a new --watermark-opacity var since the helmet contrasts differently against the lighter background - Toast (Options) — text colour flips to white on solid bg - Danger button hover (Options) — text colour flips to white Total: 3 files, +98 lines, 1 line modified. Bundled with the v0.4.1-prep back-link fix already merged into this branch. Together: a complete UX polish release (first-run hint shipped in v0.4.0 plus back-link plus light mode = v0.5.0).	2026-06-09 23:54:09 +01:00
ranger	eb6901f722	Merge v0.4.1-prep — Options page back-link to Tuner UI	2026-06-09 23:51:11 +01:00
ranger	41f42f1048	feat(v0.4.1-prep): back link from Options page to Tuner main UI David flagged 2026-06-09 night: 'when i click the settings button i go to settings but we have no back link to radio'. Real UX gap — Options was a one-way trip. The popup auto-closes on launch and the NewTab is in a different tab, so there was no obvious way back. Fix: the existing brand header (helmet + 'RangerHQ Tuner — Options' title) is now a single anchor pointing at newtab.html. Adds a small ← glyph to the left of the helmet that hover-shifts left + colour-shifts to accent green for a clear back-affordance. Same-tab navigation (just an href, no chrome.tabs.create) so the user doesn't accumulate Tuner tabs. They came IN via Options, they go OUT into the player UI in the same tab. Aria: the ← is hidden from screen readers (decorative); the title attribute on the anchor gives the accessible label. 2 files, +24 lines, 4 lines modified in existing .opt-brand block. Branch: v0.4.1-prep — not for immediate ship since v0.4.0 is still in Web Store re-review. Bundle this with light-mode + other polish into v0.5.0 OR ship as quick v0.4.1 patch after v0.4.0 clears.	2026-06-09 23:42:42 +01:00
ranger	f796fe8223	chore: v0.4.0 — bump version + CHANGELOG entry manifest.json version 0.3.0 → 0.4.0. CHANGELOG.md entry for v0.4.0 documents the first-run UX hint feature (merged in `b82f14e` via v0.4.0-prep branch). Zero new permissions, zero new dependencies, zero behaviour change for existing users. Shipped the same day v0.3.0 went LIVE on Chrome Web Store (~15.5h after submission). Same-account update review window is ~24-48h per the reference_chrome_web_store_rules memory.	2026-06-09 22:15:17 +01:00
ranger	afaff271a4	Merge v0.4.0-prep — first-run UX hint	2026-06-09 22:14:15 +01:00