ranger
d0d5e76abe
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.
RangerHQ Tuner
🎉 Install from the Chrome Web Store →
Lightweight indie internet radio player for Chrome. Plays SomaFM in any browser tab. Manifest V3, vanilla JS, no telemetry.
Sibling to rangerhq-radio (the WordPress version).
Tier 1 — MVP (current)
- ✅ Manifest V3 + Offscreen API audio
- ✅ Loads all SomaFM channels from
channels.json - ✅ Pick a station, click Play, audio runs in background
- ✅ Volume + state persisted across popup open/close
- ✅ Catalogue cached 6h in
chrome.storage.local - ✅ Source-adapter pattern in place for future networks
Install (developer mode)
- Open
chrome://extensions - Toggle Developer mode on (top right)
- Click Load unpacked → pick this folder (
rangerhq-tuner/) - Pin the extension to your toolbar (puzzle icon → pin)
- Click the toolbar icon → pick a SomaFM station → ▶ Play
Project layout
rangerhq-tuner/
├── manifest.json
└── src/
├── background/service-worker.js # message router, no audio here
├── offscreen/offscreen.{html,js} # the <audio> element host (MV3 needs this)
├── popup/popup.{html,css,js} # the toolbar UI
├── sources/ # extensibility seam
│ ├── base-source.js # RadioSource interface (JSDoc)
│ ├── somafm.js # first concrete adapter
│ └── index.js # registry
├── lib/ # shared utilities
└── assets/icons/ # 16/32/48/128 PNGs
License
GPL-2.0-or-later — matches the rest of the RangerHQ family.