From 44e2792f0e8ea6d6416e5ba65451156ae374425e Mon Sep 17 00:00:00 2001
From: HomeDash Bot <bot@example.com>
Date: Fri, 11 Sep 2026 23:38:56 +0800
Subject: [PATCH] =?UTF-8?q?fix(theme):=20=E6=B7=B1=E8=89=B2=E4=B8=8B?=
 =?UTF-8?q?=E4=B8=BB=E9=A1=B5=E5=BA=95=E8=89=B2=E4=B8=8E=E5=8F=B3=E4=B8=8B?=
 =?UTF-8?q?=E6=82=AC=E6=B5=AE=E4=BB=B6=E4=BB=8D=E4=B8=8D=E7=94=9F=E6=95=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

现象：主页大面积没变深；右下角仍有一块灰色方块。

根因：
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-"] 整体兜住我们注入的悬浮件，避免再漏类名
---
 web/navi.css | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++
 web/navi.js  |  7 +++++++
 2 files changed, 57 insertions(+)

diff --git a/web/navi.css b/web/navi.css
index f86b0a9..21e6826 100644
--- a/web/navi.css
+++ b/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,
diff --git a/web/navi.js b/web/navi.js
index e8bc20c..38e82f0 100644
--- a/web/navi.js
+++ b/web/navi.js
@@ -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);