From c087f1163785f5c56b087ea102efcbb76daa8368 Mon Sep 17 00:00:00 2001
From: Me Here <me@here>
Date: Sun, 24 May 2026 17:10:54 -0500
Subject: [PATCH] Theme: add System (OS-follow) option; fix light-theme
 playhead ring (was white-on-white)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 index.html | 34 ++++++++++++++++++++--------------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/index.html b/index.html
index 2b3e846..7e7244f 100644
--- a/index.html
+++ b/index.html
@@ -5,13 +5,14 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Stackable Metronome — Mockup</title>
 <script>
-  // Set theme before first paint (avoids a flash). Stored choice wins; else
-  // follow the OS preference.
+  // Set theme before first paint (avoids a flash). Preference is system|light|dark
+  // (default system → follows the OS); "system" resolves to the OS scheme here.
   (function () {
     try {
-      var t = localStorage.getItem("metronome.theme");
-      if (t !== "light" && t !== "dark") t = matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
-      document.documentElement.dataset.theme = t;
+      var p = localStorage.getItem("metronome.theme");
+      if (p !== "light" && p !== "dark" && p !== "system") p = "system";
+      var eff = p === "system" ? (matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark") : p;
+      document.documentElement.dataset.theme = eff;
     } catch (e) { document.documentElement.dataset.theme = "dark"; }
   })();
 </script>
@@ -30,11 +31,11 @@
 <style>
   :root {
     --bg:#14171c; --bg2:#1b212b; --panel:#1d222b; --panel-2:#242b36; --edge:#333d4b;
-    --txt:#c7d0db; --muted:#7f8b9a; --hot:#ffd166; --led-off:#2b323d;
+    --txt:#c7d0db; --muted:#7f8b9a; --hot:#ffd166; --led-off:#2b323d; --ring:#ffffff;
   }
   :root[data-theme="light"] {
     --bg:#e9edf2; --bg2:#f6f8fb; --panel:#ffffff; --panel-2:#eef2f7; --edge:#d2dae4;
-    --txt:#1e2630; --muted:#5c6776; --hot:#a9760a; --led-off:#dbe2ea;
+    --txt:#1e2630; --muted:#5c6776; --hot:#a9760a; --led-off:#cdd6e0; --ring:#16202c;
   }
   * { box-sizing: border-box; }
   body {
@@ -77,7 +78,7 @@
   .led.on { background:var(--lc,#888); box-shadow:0 0 8px var(--lc); color:rgba(0,0,0,.55); }
   .led.accent { box-shadow:0 0 4px #fff, 0 0 14px var(--lc); }
   .led.accent::after { content:"▲"; position:absolute; top:-1px; font-size:7px; color:#fff; }
-  .led.playhead { outline:2px solid #fff; outline-offset:1px; }
+  .led.playhead { outline:2px solid var(--ring); outline-offset:1px; }
   .led.groupstart { margin-left:16px; }
   .led.groupstart::before { content:""; position:absolute; left:-9px; top:4px; bottom:4px; width:2px; background:var(--muted); }
   /* meter lanes — compact single-row controls + strip */
@@ -800,13 +801,18 @@ function syncStartBtn() {
   else { startBtn.textContent = "▶ Start"; startBtn.classList.remove("on"); }
 }
 function toggleShortcuts(show) { const o = $("shortcutsOverlay"); o.hidden = (show === undefined) ? !o.hidden : !show; }
-function applyTheme(t) {
-  document.documentElement.dataset.theme = t;
-  try { localStorage.setItem("metronome.theme", t); } catch (e) {}
-  $("themeBtn").textContent = t === "light" ? "🌙" : "☀";   // icon = theme you'd switch TO
+const THEMES = ["system", "light", "dark"];
+function effectiveTheme(pref) { return pref === "system" ? (matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark") : pref; }
+function themePref() { try { const p = localStorage.getItem("metronome.theme"); return (p === "light" || p === "dark" || p === "system") ? p : "system"; } catch (e) { return "system"; } }
+function applyTheme(pref) {
+  try { localStorage.setItem("metronome.theme", pref); } catch (e) {}
+  document.documentElement.dataset.theme = effectiveTheme(pref);
+  $("themeBtn").textContent = pref === "system" ? "🖥" : pref === "light" ? "☀" : "🌙";
+  $("themeBtn").title = "Theme: " + pref + " (click to cycle: system → light → dark)";
 }
-$("themeBtn").addEventListener("click", () => applyTheme(document.documentElement.dataset.theme === "light" ? "dark" : "light"));
-applyTheme(document.documentElement.dataset.theme === "light" ? "light" : "dark");
+$("themeBtn").addEventListener("click", () => applyTheme(THEMES[(THEMES.indexOf(themePref()) + 1) % THEMES.length]));
+matchMedia("(prefers-color-scheme: light)").addEventListener("change", () => { if (themePref() === "system") applyTheme("system"); });
+applyTheme(themePref());
 $("startBtn").addEventListener("click", () => toggleTransport());
 let _taps = [];
 function tapTempo() {