fix(theme): 深色不再抹掉壁纸,改为深色遮罩压暗

用户反馈深色下背景图片消失。原因:我在深色里用了 background 简写并带
!important(特异性 0,2,1 > 壁纸规则的 0,1,1),把壁纸的 background-image
清成了 none。

改为:只覆盖 background-color,另加 body::before 深色遮罩(与亮色模式
白色遮罩同思路,z-index:-1 是本站既有做法),壁纸依旧可见、只是变暗。
同时修正上一轮验证方法的缺陷:那几次"看到旧样式"是浏览器缓存造成的假象。
This commit is contained in:
HomeDash Bot
2026-09-12 07:40:27 +08:00
parent a78c5180ca
commit e064ef5296

View File

@ -1363,11 +1363,11 @@ html[data-theme] .navi-footer a {
因此与注入顺序无关,稳定生效。 */
html.navi-dark {
color-scheme: dark !important;
--background: #0b1120;
--background-color: #0b1120;
--background-darker: #070d18;
--code-editor-background: #0f172a;
--code-editor-background-color: #0f172a;
--code-editor-color: #e2e8f0;
--config-code-background: #0f172a;
--config-code-background-color: #0f172a;
--config-code-color: #e2e8f0;
--config-settings-background: rgba(15, 23, 42, 0.92);
--config-settings-color: #cbd5e1;
@ -1377,7 +1377,7 @@ html.navi-dark {
--footer-text-color: #94a3b8;
--footer-text-color-link: #38bdf8;
--heading-text-color: #f1f5f9;
--highlight-background: #1e40af;
--highlight-background-color: #1e40af;
--highlight-color: #e2e8f0;
--info: #38bdf8;
--item-group-background: rgba(17, 25, 40, 0.62);
@ -1394,7 +1394,7 @@ html.navi-dark {
--neutral: #94a3b8;
--primary: #38bdf8;
--primary-alt: #0ea5e9;
--scroll-bar-background: #0f172a;
--scroll-bar-background-color: #0f172a;
--scroll-bar-color: #334155;
--search-container-background: rgba(15, 23, 42, 0.6);
--search-field-background: rgba(15, 23, 42, 0.8);
@ -1413,9 +1413,12 @@ html.navi-dark {
}
/* 页面底色与文字:特异度 (0,2,1) > customCss 的 html[data-theme] body (0,1,1),
因此不再依赖注入顺序(之前正是这里被打平局,导致"主页大面积没变深")。 */
/* 只改 background-color,绝不使用 background 简写:
用户可能配了壁纸,而壁纸是通过 background-image 设在 body 上的
(见 conf.yml 的 NAVI-WALLPAPER 块)。用简写会把 background-image 清成 none,
壁纸就消失了 —— 这正是上一版的问题。 */
html.navi-dark body.navi-dark,
html.navi-dark body {
background: #0b1120 !important;
background-color: #0b1120 !important;
color: #e8eefc !important;
}
@ -1497,9 +1500,20 @@ html.navi-dark body .navi-dock a {
主题变量不足以覆盖前文带 !important 的亮色规则,因此按真实 Dashy DOM
补齐标题、分组、卡片和浮动控件。布局容器必须透明,只有圆形按钮本身着色。 */
html.navi-dark body.navi-dark {
background: #080f1e !important;
background-color: #080f1e !important;
color: #e8eefc !important;
}
/* 壁纸压暗:在 body 背景之上、内容之下铺一层深色遮罩(与亮色模式的白色
遮罩同一思路),这样深色下壁纸仍然可见、只是变暗,而不是被抹掉。
z-index:-1 + position:fixed 是本站既有的做法(门户页 .bg-decor 同款)。 */
html.navi-dark body::before {
content: '' !important;
position: fixed !important;
inset: 0 !important;
z-index: -1 !important;
pointer-events: none !important;
background: rgba(6, 12, 24, .70) !important;
}
/* 顶部标题栏 */
html.navi-dark body #dashy > header {