fix(admin): 后台设置页支持自动深浅色

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

- head 内联引导脚本:localStorage['navi-theme'] 优先,其次 prefers-color-scheme
- 深色下整体替换 CSS 变量,并补掉少数写死的白色
  (输入框/按钮/列表项/图片底/阴影),加 color-scheme 让原生控件与滚动条跟随
- 与导航页、登录页共用同一个 storage 键,三处观感一致
This commit is contained in:
HomeDash Bot
2026-09-11 23:23:15 +08:00
parent a8ce6ad759
commit 1c20cab519

View File

@ -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%}