From 064f986a7f8147093754ea69ffc52777e76431a4 Mon Sep 17 00:00:00 2001 From: HomeDash Bot Date: Sat, 12 Sep 2026 07:49:34 +0800 Subject: [PATCH] =?UTF-8?q?fix(theme):=20=E6=B7=B1=E8=89=B2=E9=81=AE?= =?UTF-8?q?=E7=BD=A9=E4=BA=A4=E7=BB=99=E6=9C=8D=E5=8A=A1=E7=AB=AF=EF=BC=8C?= =?UTF-8?q?=E9=81=BF=E5=85=8D=E5=8F=8C=E9=87=8D=E5=8E=8B=E6=9A=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 实测发现深色下 body 的 background-image 仍是亮色的 70% 白遮罩（壁纸被洗白）。 遮罩由服务端 applyWallpaperBlock 写进 conf.yml，因此在那里补一条深色规则 （同一张壁纸 + rgba(6,12,24,dim+0.15) 遮罩），并移除 navi.css 里那层 body::before 遮罩，避免壁纸被双重压暗。加单测断言深浅两条规则共存、 且移除壁纸时一并清除。 --- admin-server/main.go | 18 +++++++++ admin-server/main_test.go | 19 +++++++++ web/navi.css | 84 +++++++++++++++++++++++++++++++++++++++ 3 files changed, 121 insertions(+) diff --git a/admin-server/main.go b/admin-server/main.go index 1699179..8248ee6 100644 --- a/admin-server/main.go +++ b/admin-server/main.go @@ -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" } diff --git a/admin-server/main_test.go b/admin-server/main_test.go index 2c4cb6e..6d777b3 100644 --- a/admin-server/main_test.go +++ b/admin-server/main_test.go @@ -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) + } +} diff --git a/web/navi.css b/web/navi.css index 69728dd..544adbf 100644 --- a/web/navi.css +++ b/web/navi.css @@ -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 补齐标题、分组、卡片和浮动控件。布局容器必须透明，只有圆形按钮本身着色。 */