fix(admin): 后台设置页支持自动深浅色
反馈"设置页也没有":/admin/ 只有一套亮色变量(我写它时没做主题), 不跟随系统也不跟随导航页/登录页的手动选择。 - head 内联引导脚本:localStorage['navi-theme'] 优先,其次 prefers-color-scheme - 深色下整体替换 CSS 变量,并补掉少数写死的白色 (输入框/按钮/列表项/图片底/阴影),加 color-scheme 让原生控件与滚动条跟随 - 与导航页、登录页共用同一个 storage 键,三处观感一致
This commit is contained in:
@ -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%}
|
||||
|
||||
Reference in New Issue
Block a user