Light/dark/auto theme with system detection and toggle

index.html

@@ -7,7 +7,7 @@
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
 <style>
-:root {
+:root, [data-theme="dark"] {
   --bg: #0f0e0d;
   --surface: #1c1917;
   --surface2: #292524;
@@ -24,6 +24,33 @@
   --danger: #ef4444;
   --success: #22c55e;
   --warning: #fbbf24;
+  --btn-text: #1c1917;
+  --shadow-color: rgba(0,0,0,0.3);
+  --btn-shadow: #92400e;
+  --btn-shadow-hf: #b45309;
+}
+
+[data-theme="light"] {
+  --bg: #fafaf9;
+  --surface: #ffffff;
+  --surface2: #f5f5f4;
+  --surface3: #e7e5e4;
+  --border: #d6d3d1;
+  --border-hover: #a8a29e;
+  --text: #1c1917;
+  --text-secondary: #57534e;
+  --text-muted: #78716c;
+  --accent: #d97706;
+  --accent-hover: #b45309;
+  --accent-subtle: rgba(217,119,6,0.08);
+  --accent-glow: rgba(217,119,6,0.1);
+  --danger: #dc2626;
+  --success: #16a34a;
+  --warning: #d97706;
+  --btn-text: #ffffff;
+  --shadow-color: rgba(0,0,0,0.1);
+  --btn-shadow: #92400e;
+  --btn-shadow-hf: #7c2d12;
 }
 
 * { margin: 0; padding: 0; box-sizing: border-box; }
@@ -73,7 +100,7 @@ body {
   justify-content: center;
   font-size: 16px;
   font-weight: 800;
-  color: #1c1917;
+  color: var(--btn-text);
   font-family: 'Inter', sans-serif;
 }
 
@@ -332,17 +359,17 @@ body {
 .btn-generate {
   flex: 1; padding: 14px 24px;
   background: linear-gradient(135deg, #fbbf24, var(--accent));
-  color: #1c1917; border: none; border-radius: 10px;
+  color: var(--btn-text); border: none; border-radius: 10px;
   font-size: 14px; font-weight: 600; font-family: 'Inter', sans-serif;
   cursor: pointer; transition: all 0.15s;
   display: flex; align-items: center; justify-content: center; gap: 8px;
-  box-shadow: 0 4px 0 #92400e, 0 6px 12px rgba(0,0,0,0.3);
+  box-shadow: 0 4px 0 var(--btn-shadow), 0 6px 12px var(--shadow-color);
   transform: translateY(0);
 }
-.btn-generate:hover { filter: brightness(1.05); transform: translateY(-2px); box-shadow: 0 6px 0 #92400e, 0 8px 16px rgba(0,0,0,0.3); }
-.btn-generate:active { transform: translateY(2px); box-shadow: 0 1px 0 #92400e, 0 2px 4px rgba(0,0,0,0.3); }
+.btn-generate:hover { filter: brightness(1.05); transform: translateY(-2px); box-shadow: 0 6px 0 var(--btn-shadow), 0 8px 16px var(--shadow-color); }
+.btn-generate:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--btn-shadow), 0 2px 4px var(--shadow-color); }
 .btn-generate:disabled { opacity: 0.4; cursor: not-allowed; transform: none; filter: none; box-shadow: none; }
-.btn-generate .spinner { width: 16px; height: 16px; border: 2px solid rgba(0,0,0,0.2); border-top-color: #1c1917; border-radius: 50%; animation: spin 0.6s linear infinite; display: none; }
+.btn-generate .spinner { width: 16px; height: 16px; border: 2px solid rgba(0,0,0,0.2); border-top-color: var(--btn-text); border-radius: 50%; animation: spin 0.6s linear infinite; display: none; }
 .btn-generate.loading .spinner { display: block; }
 .btn-generate.loading .btn-text { display: none; }
 @keyframes spin { to { transform: rotate(360deg); } }
@@ -367,7 +394,7 @@ body {
 }
 .status-cta.upgrade { background: #ff9d00; color: #000; }
 .status-cta.upgrade:hover { background: #ffb340; }
-.status-cta.credits { background: var(--accent); color: #1c1917; }
+.status-cta.credits { background: var(--accent); color: var(--btn-text); }
 .status-cta.credits:hover { background: var(--accent-hover); }
 
 .progress-track { width: 100%; height: 3px; background: var(--surface3); border-radius: 2px; margin-top: 6px; overflow: hidden; display: none; }
@@ -381,7 +408,7 @@ body {
 
 .play-btn {
   width: 40px; height: 40px; border-radius: 50%; background: var(--accent);
-  border: none; color: #1c1917; cursor: pointer;
+  border: none; color: var(--btn-text); cursor: pointer;
   display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.15s;
 }
 .play-btn:hover { background: var(--accent-hover); transform: scale(1.05); }
@@ -435,7 +462,7 @@ body {
   font-family: 'Inter', sans-serif; cursor: pointer; border: none; transition: all 0.1s;
 }
 
-.voice-tile-btn.use { background: var(--accent); color: #1c1917; font-weight: 600; }
+.voice-tile-btn.use { background: var(--accent); color: var(--btn-text); font-weight: 600; }
 .voice-tile-btn.use:hover { background: var(--accent-hover); }
 .voice-tile-btn.del { background: transparent; color: var(--text-muted); border: 1px solid var(--border); }
 .voice-tile-btn.del:hover { color: var(--danger); border-color: var(--danger); }
@@ -583,18 +610,30 @@ pre {
   display: flex; align-items: center; justify-content: center;
   transition: all 0.1s; flex-shrink: 0;
 }
-.preview-btn:hover { background: var(--accent); color: #1c1917; border-color: var(--accent); }
+.preview-btn:hover { background: var(--accent); color: var(--btn-text); border-color: var(--accent); }
 .preview-btn svg { width: 12px; height: 12px; }
 
+/* ── Theme toggle ── */
+.theme-btn {
+  width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border);
+  background: var(--surface2); color: var(--text-muted); cursor: pointer;
+  display: flex; align-items: center; justify-content: center; transition: all 0.1s;
+}
+.theme-btn:hover { color: var(--text); border-color: var(--border-hover); }
+.theme-btn svg { width: 16px; height: 16px; }
+
 .footer {
   text-align: center; padding: 32px 0 16px; font-size: 12px; color: var(--text-muted);
 }
 .footer a { color: var(--text-secondary); text-decoration: none; }
 .footer a:hover { color: var(--accent); }
 .cm { color: var(--text-muted); }
-.s { color: #86efac; }
-.k { color: #fcd34d; }
-.f { color: #93c5fd; }
+[data-theme="dark"] .s { color: #86efac; }
+[data-theme="dark"] .k { color: #fcd34d; }
+[data-theme="dark"] .f { color: #93c5fd; }
+[data-theme="light"] .s { color: #166534; }
+[data-theme="light"] .k { color: #92400e; }
+[data-theme="light"] .f { color: #1e40af; }
 
 /* ── Modal ── */
 .modal-overlay {
@@ -633,7 +672,7 @@ pre {
 .btn-modal { padding: 9px 20px; border-radius: 8px; font-size: 13px; font-weight: 500; font-family: 'Inter', sans-serif; cursor: pointer; transition: all 0.1s; border: none; }
 .btn-cancel { background: var(--surface2); color: var(--text-secondary); border: 1px solid var(--border); }
 .btn-cancel:hover { background: var(--surface3); color: var(--text); }
-.btn-save { background: var(--accent); color: #1c1917; font-weight: 600; }
+.btn-save { background: var(--accent); color: var(--btn-text); font-weight: 600; }
 .btn-save:hover { background: var(--accent-hover); }
 .btn-save:disabled { opacity: 0.4; cursor: not-allowed; }
 
@@ -654,10 +693,10 @@ pre {
   padding: 13px 32px; background: #ff9d00; color: #000; border: none; border-radius: 10px;
   font-size: 15px; font-weight: 600; font-family: 'Inter', sans-serif; cursor: pointer;
   display: inline-flex; align-items: center; gap: 8px; transition: all 0.15s;
-  box-shadow: 0 4px 0 #b45309, 0 6px 12px rgba(0,0,0,0.3);
+  box-shadow: 0 4px 0 var(--btn-shadow-hf), 0 6px 12px var(--shadow-color);
 }
-.btn-hf:hover { background: #ffb340; transform: translateY(-2px); box-shadow: 0 6px 0 #b45309, 0 8px 16px rgba(0,0,0,0.3); }
-.btn-hf:active { transform: translateY(2px); box-shadow: 0 1px 0 #b45309, 0 2px 4px rgba(0,0,0,0.3); }
+.btn-hf:hover { background: #ffb340; transform: translateY(-2px); box-shadow: 0 6px 0 var(--btn-shadow-hf), 0 8px 16px var(--shadow-color); }
+.btn-hf:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--btn-shadow-hf), 0 2px 4px var(--shadow-color); }
 .landing-note { font-size: 12px; color: var(--text-muted); }
 
 ::-webkit-scrollbar { width: 6px; }
@@ -675,12 +714,60 @@ pre {
 </head>
 <body>
 
+<script>
+// Theme: auto (system), dark, light — runs before paint to avoid flash
+(function() {
+  const saved = localStorage.getItem("zl_theme");
+  function getEffective(pref) {
+    if (pref === "light" || pref === "dark") return pref;
+    return window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
+  }
+  const effective = getEffective(saved || "auto");
+  document.documentElement.setAttribute("data-theme", effective);
+
+  window._themePref = saved || "auto"; // auto, dark, light
+
+  window.cycleTheme = function() {
+    const order = ["auto", "light", "dark"];
+    const idx = order.indexOf(window._themePref);
+    window._themePref = order[(idx + 1) % 3];
+    localStorage.setItem("zl_theme", window._themePref);
+    const eff = getEffective(window._themePref);
+    document.documentElement.setAttribute("data-theme", eff);
+    updateThemeIcons(eff);
+  };
+
+  window.updateThemeIcons = function(eff) {
+    const sun = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>';
+    const moon = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>';
+    const auto = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 2a10 10 0 0 1 0 20V2z" fill="currentColor"/></svg>';
+    const icon = window._themePref === "auto" ? auto : eff === "dark" ? moon : sun;
+    document.querySelectorAll(".theme-btn").forEach(b => b.innerHTML = icon);
+  };
+
+  // Listen for system theme changes when in auto mode
+  window.matchMedia("(prefers-color-scheme: light)").addEventListener("change", () => {
+    if (window._themePref === "auto") {
+      const eff = getEffective("auto");
+      document.documentElement.setAttribute("data-theme", eff);
+      updateThemeIcons(eff);
+    }
+  });
+
+  // Update icons after DOM loads
+  document.addEventListener("DOMContentLoaded", () => updateThemeIcons(effective));
+})();
+</script>
+
 <div id="landing">
   <div class="logo-icon" style="width:56px;height:56px;font-size:28px;border-radius:14px">0</div>
   <h1>ZeroLabs</h1>
   <p class="subtitle">Voice cloning powered by open-source models. 100x cheaper than proprietary competitors like ElevenLabs.</p>
   <button class="btn-hf" onclick="login()">🤗 Sign in with Hugging Face</button>
   <p class="landing-note">Uses your HF ZeroGPU quota &middot; Free tier included</p>
+  <button class="theme-btn" onclick="cycleTheme()" title="Toggle theme" style="position:fixed;top:16px;right:16px">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
+  </button>
 </div>
 
 <div id="app" class="app-layout" style="display:none">
@@ -691,6 +778,9 @@ pre {
       ZeroLabs
     </div>
     <div class="header-right">
+      <button class="theme-btn" onclick="cycleTheme()" title="Toggle theme" id="theme-btn-app">
+        <svg id="theme-icon-app" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
+      </button>
       <div class="user-pill" id="user-pill">
         <img id="user-avatar" src="" alt="">
         <span id="user-name"></span>