fix(theme): 深色下主页底色与右下悬浮件仍不生效
现象:主页大面积没变深;右下角仍有一块灰色方块。 根因: 1. conf.yml 的玻璃主题用 html[data-theme] body 设了亮色背景,特异度与 html.navi-dark body 相同(0,1,1),而 customCss 由 Dashy 运行时注入、排在 navi.css 之后 —— 平局时后者胜出,所以页面底色没被改掉。 2. 右下那块是我们自己的悬浮件,但此前只逐个类名列举,漏掉的类名就保持原样。 改法: - navi.js 把 navi-dark 同时打到 <html> 与 <body>(并在 DOMContentLoaded 再应用一次) - navi.css 用 html.navi-dark body.navi-dark 提高特异度到 (0,2,1),压过 customCss, 与注入顺序无关 - 兜住 Dashy 外层容器(#dashy/.home/.workspace/.minimal-home)与原生页脚 - 用 [class^="navi-"]/[class*=" navi-"] 整体兜住我们注入的悬浮件,避免再漏类名
This commit is contained in:
50
web/navi.css
50
web/navi.css
@ -1411,10 +1411,60 @@ html.navi-dark {
|
||||
--welcome-popup-background: rgba(15, 23, 42, 0.88);
|
||||
--welcome-popup-text-color: #e2e8f0;
|
||||
}
|
||||
/* 页面底色与文字:特异度 (0,2,1) > customCss 的 html[data-theme] body (0,1,1),
|
||||
因此不再依赖注入顺序(之前正是这里被打平局,导致"主页大面积没变深")。 */
|
||||
html.navi-dark body.navi-dark,
|
||||
html.navi-dark body {
|
||||
background: #0b1120 !important;
|
||||
background-color: #0b1120 !important;
|
||||
color: #e8eefc !important;
|
||||
}
|
||||
/* Dashy 的外层容器:确保不残留亮色底 */
|
||||
html.navi-dark body #dashy,
|
||||
html.navi-dark body .home,
|
||||
html.navi-dark body .main-content,
|
||||
html.navi-dark body .workspace,
|
||||
html.navi-dark body .minimal-home {
|
||||
background: transparent !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
/* Dashy 原生页脚(它自己渲染的那一个) */
|
||||
html.navi-dark body footer,
|
||||
html.navi-dark body .footer {
|
||||
background: transparent !important;
|
||||
color: #94a3b8 !important;
|
||||
border-color: rgba(148, 163, 184, 0.2) !important;
|
||||
}
|
||||
/* 我们注入的全部悬浮件:类名统一以 navi- 开头,这里整体兜住,
|
||||
避免再出现"右下角一块灰色方块"(漏掉某个类名就会那样)。 */
|
||||
html.navi-dark body [class^="navi-"],
|
||||
html.navi-dark body [class*=" navi-"] {
|
||||
border-color: rgba(148, 163, 184, 0.22) !important;
|
||||
}
|
||||
html.navi-dark body [class^="navi-"]:not(.navi-icon):not(.navi-search-icon),
|
||||
html.navi-dark body [class*=" navi-"]:not(.navi-icon):not(.navi-search-icon) {
|
||||
background-color: rgba(17, 25, 40, 0.8);
|
||||
color: #e8eefc;
|
||||
}
|
||||
html.navi-dark body .navi-dock,
|
||||
html.navi-dark body .navi-dock *,
|
||||
html.navi-dark body .navi-search-bar,
|
||||
html.navi-dark body .navi-footer-host,
|
||||
html.navi-dark body .navi-ws-toolbar,
|
||||
html.navi-dark body .navi-ws-modal,
|
||||
html.navi-dark body .navi-mini-tabs,
|
||||
html.navi-dark body .navi-view-switch {
|
||||
background-color: rgba(17, 25, 40, 0.82) !important;
|
||||
color: #e8eefc !important;
|
||||
}
|
||||
html.navi-dark body .navi-dock svg,
|
||||
html.navi-dark body .navi-dock button,
|
||||
html.navi-dark body .navi-footer,
|
||||
html.navi-dark body .navi-footer a,
|
||||
html.navi-dark body .navi-footer .navi-footer-sep { color: #cbd5e1 !important; }
|
||||
html.navi-dark body .navi-footer,
|
||||
html.navi-dark body .navi-footer a,
|
||||
html.navi-dark body .navi-footer .navi-footer-sep { color: #94a3b8 !important; }
|
||||
/* 我们自己的悬浮件(不在 Dashy 变量体系内,单独给深色) */
|
||||
html.navi-dark body .navi-search-bar,
|
||||
html.navi-dark body .navi-dock,
|
||||
|
||||
@ -668,9 +668,16 @@
|
||||
// 我们只加自己的类,深色变量在 navi.css 里整套覆盖。
|
||||
root.classList.toggle('navi-dark', dark);
|
||||
root.style.colorScheme = dark ? 'dark' : 'light';
|
||||
// 同一个类也打到 body:customCss 是 Dashy 运行时注入的、排在 navi.css 之后,
|
||||
// 只靠 html.navi-dark body 与它同特异度会打成平局而输给它(实测:
|
||||
// 主页背景仍是亮色)。html.navi-dark body.navi-dark 特异度更高,稳定胜出。
|
||||
if (document.body) document.body.classList.toggle('navi-dark', dark);
|
||||
}
|
||||
|
||||
apply();
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', apply);
|
||||
}
|
||||
if (mq.addEventListener) mq.addEventListener('change', apply);
|
||||
else if (mq.addListener) mq.addListener(apply);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user