From 1b506312a2bb7a067a3f86fd869c333ecfb42aee Mon Sep 17 00:00:00 2001
From: cft0808 <cft0808@163.com>
Date: Thu, 26 Mar 2026 22:04:59 +0800
Subject: [PATCH] feat: add light/dark theme toggle to dashboard (#152)

- Add light theme CSS variables (html.light)
- Add toggle button in header with localStorage persistence
- All existing elements auto-adapt via CSS custom properties

Closes #152
---
 dashboard/dashboard.html | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/dashboard/dashboard.html b/dashboard/dashboard.html
index f0b2bf9..8b61662 100644
--- a/dashboard/dashboard.html
+++ b/dashboard/dashboard.html
@@ -11,9 +11,17 @@
       --text:#dde4f8;--muted:#5a6b92;--ok:#2ecc8a;--warn:#f5c842;--danger:#ff5270;
       --acc:#6a9eff;--acc2:#a07aff;
     }
+    html.light{
+      --bg:#f4f5f7;--panel:#ffffff;--panel2:#ebedf0;--line:#d8dce6;
+      --text:#1a1d26;--muted:#6b7280;--ok:#16a34a;--warn:#d97706;--danger:#dc2626;
+      --acc:#3b82f6;--acc2:#7c3aed;
+    }
     *{box-sizing:border-box;margin:0;padding:0}
     body{background:var(--bg);color:var(--text);font-family:"PingFang SC",Inter,-apple-system,"Segoe UI",sans-serif;min-height:100vh}
     ::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#1e2538;border-radius:4px}
+    html.light ::-webkit-scrollbar-thumb{background:#c4c8d4}
+    .theme-toggle{background:var(--panel);border:1px solid var(--line);border-radius:8px;cursor:pointer;font-size:16px;padding:4px 10px;color:var(--text);transition:all .15s}
+    .theme-toggle:hover{background:var(--panel2)}
 
     .wrap{max-width:1400px;margin:0 auto;padding:16px}
 
@@ -661,6 +669,7 @@
       <div class="sub">皇上视角 · 实时旨意追踪</div>
     </div>
     <div class="hdr-r">
+      <button class="theme-toggle" onclick="toggleTheme()" id="theme-btn" title="切换主题">🌙</button>
       <span class="chip" id="chip-sync">⟳ 同步中</span>
       <span class="chip" id="chip-tasks">— 旨意</span>
       <button class="btn-refresh" onclick="loadAll()">⟳ 立即刷新</button>
@@ -3192,6 +3201,20 @@ async function executeTemplate(e, tplId){
   }
 }
 
+/* ══ THEME ══ */
+function toggleTheme(){
+  const isLight = document.documentElement.classList.toggle('light');
+  localStorage.setItem('theme', isLight ? 'light' : 'dark');
+  document.getElementById('theme-btn').textContent = isLight ? '☀️' : '🌙';
+}
+(function initTheme(){
+  const saved = localStorage.getItem('theme');
+  if(saved === 'light'){
+    document.documentElement.classList.add('light');
+    document.getElementById('theme-btn').textContent = '☀️';
+  }
+})();
+
 /* ══ INIT ══ */
 restoreGlobalScanState();
 loadAll().then(()=>showCeremony());