diff --git a/player.html b/player.html
index bd02be8..f68a9dd 100644
--- a/player.html
+++ b/player.html
@@ -16,29 +16,57 @@
Audio here is the synthesized voice set (the firmware uses the same scheduler;
on hardware the voices map to CC0 samples on the I2S DAC). One file, no deps.
-->
+
@@ -333,6 +365,20 @@ $("bLoad").onclick=()=>loadConfig($("cfg").value);
$("storedSel").onchange=(e)=>{ const v=e.target.value; if(!v) return;
const sl = v[0]==="b" ? e.target._builtin[+v.slice(1)] : e.target._lists[+v.slice(1)]; if(!sl) return;
loadSetlistObj({title:sl.title,items:(sl.items||[]).map(it=>({...it}))}); setStatus("✓ Loaded set list “"+(sl.title||"set list")+"”.",true); };
+/* theme toggle — cycles system → light → dark; shares the editor's "metronome.theme" key */
+const THEMES = ["system","light","dark"];
+function effectiveTheme(p){ return p==="system" ? (matchMedia("(prefers-color-scheme: light)").matches?"light":"dark") : p; }
+function themePref(){ try{ const p=localStorage.getItem("metronome.theme"); return (p==="light"||p==="dark"||p==="system")?p:"system"; }catch(e){ return "system"; } }
+function applyTheme(p){
+ try{ localStorage.setItem("metronome.theme",p); }catch(e){}
+ document.documentElement.dataset.theme = effectiveTheme(p);
+ $("themeBtn").textContent = p==="system" ? "◐" : p==="light" ? "☀" : "☾";
+ $("themeBtn").title = "Theme: "+p+" (click to cycle: system → light → dark)";
+}
+$("themeBtn").onclick = ()=> applyTheme(THEMES[(THEMES.indexOf(themePref())+1)%THEMES.length]);
+matchMedia("(prefers-color-scheme: light)").addEventListener("change", ()=>{ if(themePref()==="system") applyTheme("system"); });
+applyTheme(themePref());
+
addEventListener("keydown",(e)=>{
const t=e.target, tag=t?t.tagName:""; if(tag==="TEXTAREA"||tag==="INPUT"||tag==="SELECT") return;
const k=e.key;