From 1c20cab519f5b3e746c09e5f039abaf5ef7cd276 Mon Sep 17 00:00:00 2001
From: HomeDash Bot <bot@example.com>
Date: Fri, 11 Sep 2026 23:23:15 +0800
Subject: [PATCH] =?UTF-8?q?fix(admin):=20=E5=90=8E=E5=8F=B0=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=E9=A1=B5=E6=94=AF=E6=8C=81=E8=87=AA=E5=8A=A8=E6=B7=B1?=
 =?UTF-8?q?=E6=B5=85=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

反馈"设置页也没有"：/admin/ 只有一套亮色变量（我写它时没做主题），
不跟随系统也不跟随导航页/登录页的手动选择。

- head 内联引导脚本：localStorage['navi-theme'] 优先，其次 prefers-color-scheme
- 深色下整体替换 CSS 变量，并补掉少数写死的白色
  （输入框/按钮/列表项/图片底/阴影），加 color-scheme 让原生控件与滚动条跟随
- 与导航页、登录页共用同一个 storage 键，三处观感一致
---
 admin/index.html | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/admin/index.html b/admin/index.html
index d671c97..3eca4a4 100644
--- a/admin/index.html
+++ b/admin/index.html
@@ -4,6 +4,7 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>导航管理</title>
+<script>(function(){var s=localStorage.getItem('navi-theme');var p=window.matchMedia('(prefers-color-scheme:dark)').matches;document.documentElement.setAttribute('data-theme',s||(p?'dark':'light'))})()</script>
 <style>
 *{box-sizing:border-box;margin:0;padding:0}
 :root{
@@ -97,6 +98,36 @@ details summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--tx2)}
 .gw-ck input{width:auto;padding:0}
 #gw-msg{word-break:break-all}
 
+/* ── 深色模式 ──
+   <html data-theme="dark"> 由 head 里的脚本按系统偏好设置（手动选择优先，
+   与导航页/登录页共用 navi-theme 这个键，三处观感一致）。
+   变量在这里整体替换；少数写死的白色单独覆盖。 */
+html[data-theme="dark"]{
+  color-scheme:dark;
+  --bd:rgba(148,163,184,.22); --bg-card:rgba(17,25,40,.74);
+  --tx:#e8eefc; --tx2:#a9b6cc; --tx3:#7c8aa3; --ac:#60a5fa; --danger:#f87171;
+}
+html[data-theme="dark"] body{
+  background:
+    radial-gradient(1100px 600px at 12% -10%, rgba(37,99,235,.22) 0%, transparent 60%),
+    radial-gradient(900px 520px at 88% 0%, rgba(139,92,246,.18) 0%, transparent 55%),
+    linear-gradient(160deg,#0b1120,#101a2e 55%,#0b1524);
+}
+html[data-theme="dark"] .card{ box-shadow:0 8px 28px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.3) }
+html[data-theme="dark"] input,
+html[data-theme="dark"] select,
+html[data-theme="dark"] textarea{ background:rgba(15,23,42,.78); color:var(--tx); border-color:var(--bd) }
+html[data-theme="dark"] button{ background:rgba(30,41,59,.85); color:var(--tx); border-color:var(--bd) }
+html[data-theme="dark"] button:hover{ border-color:#475569 }
+html[data-theme="dark"] button.primary{ background:var(--ac); border-color:var(--ac); color:#0b1120 }
+html[data-theme="dark"] button.primary:hover{ background:#93bbfd }
+html[data-theme="dark"] button.danger{ color:var(--danger); border-color:rgba(248,113,113,.35) }
+html[data-theme="dark"] button.danger:hover{ background:rgba(248,113,113,.12) }
+html[data-theme="dark"] .itm{ background:rgba(30,41,59,.5) }
+html[data-theme="dark"] .itm:hover{ background:rgba(51,65,85,.62); border-color:var(--bd) }
+html[data-theme="dark"] .preview img{ background:#0f172a }
+html[data-theme="dark"] .toast{ box-shadow:0 10px 30px rgba(0,0,0,.5) }
+
 @media (max-width:560px){
   body{padding:16px 12px 48px}
   .wrap{max-width:100%}