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

fix(theme): 基于真实浏览器渲染修复深色文字与右侧方块

Browse Source 
此前只检查 CSS 规则存在，没有检查真实页面 computed style，导致标题、分组标题、
卡片正文仍被前面的亮色 !important 规则覆盖；右侧 dock/view-switch 布局容器也被
错误涂上背景，形成灰色方块。

这次通过共享 Chromium 实际登录并强制深色模式，逐项读取 computed style：
- 顶部标题 #f1f5f9
- 分组标题 #dce6f5
- 卡片主文字 #f1f5f9、说明 #a9b8cd
- 分组/卡片使用协调的深色玻璃层级
- dock 与 view-switch 布局容器完全透明，仅两个圆形按钮着色
- 备案号为完整深色胶囊，子元素透明
- 工作空间/极简视图同步补齐深色侧栏、工具条和弹窗

自动验证同时断言：文字亮度、深色面板、透明容器、圆形按钮、零运行时异常。
新增 deploy/zd-host.sh，供单容器正式接管入口后的 host 网络部署使用；失败自动回滚。
This commit is contained in:
HomeDash Bot
2026-09-12 07:30:00 +08:00
parent 44e2792f0e
commit 817a5991b3
1 changed files with 130 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
web/navi.css
View File

@ -1492,3 +1492,133 @@ html.navi-dark body .navi-dock a {
color: #cbd5e1 !important;
border-color: rgba(148, 163, 184, 0.22) !important;
}
/* ── 深色视觉收口（真实浏览器截图 + computed style 验证）──
主题变量不足以覆盖前文带 !important 的亮色规则，因此按真实 Dashy DOM
补齐标题、分组、卡片和浮动控件。布局容器必须透明，只有圆形按钮本身着色。 */
html.navi-dark body.navi-dark {
background: #080f1e !important;
color: #e8eefc !important;
}
/* 顶部标题栏 */
html.navi-dark body #dashy > header {
background: rgba(15, 23, 42, .82) !important;
border-bottom-color: rgba(148, 163, 184, .18) !important;
box-shadow: 0 8px 28px rgba(0, 0, 0, .28) !important;
}
html.navi-dark body.navi-dark #dashy > header .page-titles h1,
html.navi-dark body.navi-dark #dashy > header .page-titles .text,
html.navi-dark body.navi-dark .minimal-home .title-and-search h1 {
color: #f1f5f9 !important;
}
html.navi-dark body.navi-dark #dashy > header .page-titles .subtitle {
color: #a9b8cd !important;
}
/* 分组玻璃面板及标题 */
html.navi-dark body div.collapsable,
html.navi-dark body .minimal-section-inner {
background: rgba(25, 36, 55, .80) !important;
border-color: rgba(148, 163, 184, .20) !important;
box-shadow: 0 14px 34px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .045) !important;
}
html.navi-dark body.navi-dark div.collapsable .section-header,
html.navi-dark body.navi-dark div.collapsable .section-header h3,
html.navi-dark body.navi-dark div.collapsable .section-header h3 *,
html.navi-dark body .minimal-headings-row .headings,
html.navi-dark body .minimal-headings-row .headings * {
color: #dce6f5 !important;
}
html.navi-dark body div.collapsable .collapse-icon,
html.navi-dark body div.collapsable .section-icon,
html.navi-dark body div.collapsable .action-buttons,
html.navi-dark body div.collapsable .action-buttons * {
color: #7f91aa !important;
}
/* 导航卡片及全部文字 */
html.navi-dark body a.item {
background: rgba(43, 57, 79, .84) !important;
border-color: rgba(148, 163, 184, .23) !important;
box-shadow: 0 7px 20px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .045) !important;
color: #e8eefc !important;
}
html.navi-dark body a.item:hover,
html.navi-dark body a.item:focus-visible {
background: rgba(55, 72, 98, .90) !important;
border-color: rgba(96, 165, 250, .48) !important;
}
html.navi-dark body.navi-dark a.item .tile-title,
html.navi-dark body.navi-dark a.item .tile-title .text,
html.navi-dark body.navi-dark a.item .item-title,
html.navi-dark body.navi-dark a.item .item-title * {
color: #f1f5f9 !important;
}
html.navi-dark body.navi-dark a.item .description,
html.navi-dark body.navi-dark a.item .item-url,
html.navi-dark body.navi-dark a.item .tile-subtitle {
color: #a9b8cd !important;
}
/* 右侧方块的根因：dock / view-switch 是布局容器，绝不能绘制背景。 */
html.navi-dark body.navi-dark .navi-dock,
html.navi-dark body.navi-dark .navi-view-switch,
html.navi-dark body.navi-dark .navi-footer-host {
background: transparent !important;
background-color: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
html.navi-dark body .navi-admin-entry,
html.navi-dark body .navi-view-toggle,
html.navi-dark body .navi-search-bar {
background: rgba(20, 31, 49, .94) !important;
border-color: rgba(148, 163, 184, .30) !important;
color: #dbeafe !important;
box-shadow: 0 12px 30px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}
html.navi-dark body .navi-admin-entry:hover,
html.navi-dark body .navi-view-toggle:hover,
html.navi-dark body .navi-search-bar:hover {
background: rgba(31, 46, 70, .97) !important;
}
html.navi-dark body .navi-admin-entry svg,
html.navi-dark body .navi-view-toggle svg,
html.navi-dark body .navi-search-toggle,
html.navi-dark body .navi-search-toggle svg {
color: #dbeafe !important;
stroke: currentColor !important;
}
/* 备案号是一个完整的深色胶囊，子元素不再各自形成色块。 */
html.navi-dark body .navi-footer {
background: rgba(20, 31, 49, .90) !important;
border-color: rgba(148, 163, 184, .24) !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .045) !important;
color: #9fb0c8 !important;
}
html.navi-dark body .navi-footer *,
html.navi-dark body .navi-footer a,
html.navi-dark body .navi-footer .navi-footer-sep {
background: transparent !important;
color: #9fb0c8 !important;
}
html.navi-dark body .navi-footer a:hover { color: #7dd3fc !important; }
/* 极简/工作空间的侧栏、工具条和弹窗也使用同一深色层级。 */
html.navi-dark body nav.side-bar,
html.navi-dark body .navi-ws-toolbar,
html.navi-dark body .navi-ws-notice,
html.navi-dark body .navi-ws-modal,
html.navi-dark body .minimal-headings-row .headings {
background: rgba(20, 31, 49, .91) !important;
border-color: rgba(148, 163, 184, .22) !important;
color: #e8eefc !important;
}
html.navi-dark body .navi-ws-toolbar *,
html.navi-dark body .navi-ws-notice-title,
html.navi-dark body .navi-ws-modal-title,
html.navi-dark body nav.side-bar .side-bar-item {
color: #dce6f5 !important;
}