jianf/HomeDash
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(theme): 深色遮罩交给服务端，避免双重压暗

Browse Source 
实测发现深色下 body 的 background-image 仍是亮色的 70% 白遮罩（壁纸被洗白）。
遮罩由服务端 applyWallpaperBlock 写进 conf.yml，因此在那里补一条深色规则
（同一张壁纸 + rgba(6,12,24,dim+0.15) 遮罩），并移除 navi.css 里那层
body::before 遮罩，避免壁纸被双重压暗。加单测断言深浅两条规则共存、
且移除壁纸时一并清除。
This commit is contained in:
HomeDash Bot
2026-09-12 07:49:34 +08:00
parent 1257164c3f
commit 064f986a7f
3 changed files with 121 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
admin-server/main.go
View File

@ -78,6 +78,13 @@ func applyWallpaperBlock(css, url string, dim float64) string {
dim = 0.9
}
scrim := strconv.FormatFloat(dim, 'f', 2, 64)
// 深色下必须换一层深色遮罩：否则亮色的 70% 白遮罩会把壁纸洗白
// （实测：深色模式里 background-image 仍是 rgba(255,255,255,.7) 那层）。
// 用同一个 dim 作为深色遮罩强度，深浅两种模式观感一致。
dark := strconv.FormatFloat(dim+0.15, 'f', 2, 64)
if dim+0.15 > 0.9 {
dark = "0.90"
}
return css + "\n\n" + wallpaperBegin + "\n" +
"html[data-theme] body{\n" +
" background-image:\n" +
@ -87,6 +94,17 @@ func applyWallpaperBlock(css, url string, dim float64) string {
" background-position: center center !important;\n" +
" background-attachment: fixed !important;\n" +
" background-repeat: no-repeat !important;\n" +
"}\n" +
// 深色：同一张壁纸 + 深色遮罩（选择器特异度更高，与注入顺序无关）
"html.navi-dark body.navi-dark,\n" +
"html[data-theme].navi-dark body{\n" +
" background-image:\n" +
" linear-gradient(rgba(6,12,24," + dark + "), rgba(6,12,24," + dark + ")),\n" +
" url(\"" + url + "\") !important;\n" +
" background-size: cover !important;\n" +
" background-position: center center !important;\n" +
" background-attachment: fixed !important;\n" +
" background-repeat: no-repeat !important;\n" +
"}\n" + wallpaperEnd + "\n"
}

19
admin-server/main_test.go
View File

@ -242,3 +242,22 @@ sections:
t.Fatalf("删除/改名后分组 = %v; want %v", names, want)
}
}
// 深色模式必须换一层深色遮罩，否则亮色遮罩会把壁纸洗白。
func TestApplyWallpaperBlockEmitsDarkScrim(t *testing.T) {
out := applyWallpaperBlock("", "/wallpapers/w.jpg", 0.5)
if !strings.Contains(out, "linear-gradient(rgba(255,255,255,0.50)") {
t.Fatalf("缺少亮色遮罩:\n%s", out)
}
if !strings.Contains(out, "html.navi-dark body.navi-dark") ||
!strings.Contains(out, "rgba(6,12,24,0.65)") {
t.Fatalf("缺少深色遮罩规则:\n%s", out)
}
if strings.Count(out, "/wallpapers/w.jpg") != 2 {
t.Fatalf("深浅两种模式都应引用同一张壁纸:\n%s", out)
}
// 移除壁纸时应把两种规则一起清掉
if got := applyWallpaperBlock(out, "", 0.5); strings.Contains(got, "navi-dark body") {
t.Fatalf("移除壁纸后仍残留深色规则:\n%s", got)
}
}

84
web/navi.css
View File

@ -1496,6 +1496,90 @@ html.navi-dark body .navi-dock a {
border-color: rgba(148, 163, 184, 0.22) !important;
}
/* ── 深色视觉收口（真实浏览器截图 + computed style 验证）──
主题变量不足以覆盖前文带 !important 的亮色规则，因此按真实 Dashy DOM
补齐标题、分组、卡片和浮动控件。布局容器必须透明，只有圆形按钮本身着色。 */
html.navi-dark body.navi-dark {
background-color: #080f1e !important;
color: #e8eefc !important;
}
/* 壁纸压暗改由服务端负责：applyWallpaperBlock 会为深色模式写同一张壁纸 +
深色遮罩的规则（更具体、与顺序无关）。这里不再叠一层 body::before 遮罩，
否则壁纸会被"深色渐变 + 遮罩"双重压暗。 */
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,
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 {
background: rgba(17, 25, 40, 0.8) !important;
border-color: rgba(148, 163, 184, 0.22) !important;
color: #e8eefc !important;
}
html.navi-dark body .navi-search-bar input,
html.navi-dark body .navi-search-bar .navi-search-input {
background: rgba(15, 23, 42, 0.7) !important;
color: #e8eefc !important;
border-color: rgba(148, 163, 184, 0.25) !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; }
html.navi-dark body .navi-footer a:hover { color: #38bdf8 !important; }
html.navi-dark body .navi-dock button,
html.navi-dark body .navi-dock a {
background: rgba(30, 41, 59, 0.75) !important;
color: #cbd5e1 !important;
border-color: rgba(148, 163, 184, 0.22) !important;
}
/* ── 深色视觉收口（真实浏览器截图 + computed style 验证）──
主题变量不足以覆盖前文带 !important 的亮色规则，因此按真实 Dashy DOM
补齐标题、分组、卡片和浮动控件。布局容器必须透明，只有圆形按钮本身着色。 */