fix(webui): 深色模式真的落地了 —— 之前 .dark 是「有意留空」的
用户报「深色模式可读性差」。实测(1280×800,读页面计算值)拿到两个数字:
· .glass-card 合成成 rgb(237,237,237) 白卡,而其上 --c-gray-900 文字是
rgb(243,245,248) ⇒ **1.07:1 的白底白字**
· .nav-rail 合成成 rgb(188,189,190) 浅灰条,未选中文字只有 4.03:1
根因写在 index.css 自己的注释里:`.dark { /* 有意留空 */ }`。当年留空的理由
是「组件没有 dark: 变体,只换令牌会半深不浅」——**方向反了**:组件写的是语义
色阶(bg-white / text-gray-900),灰阶反转后本来就会自适应;真正没适配的是
**手写 CSS 里那几处硬编码白色**(.glass-card 的 0.92、--nav-bg 令牌),
它们不在 --c-* 色板里,所以「色板变量已全覆盖」的判据一直是绿的。
改动:
1. .glass-card / .nav-* 全部改走令牌,主题之间只差 alpha;
深色给 --glass-card-a: 0.06 + --nav-bg: 30 35 44/0.72。
遵守既有契约(background.test「玻璃是白色材料」):**基材恒为白**,
只降 alpha,绝不换成深色层。
2. CalendarView 的非本月农历小字 text-gray-300 → gray-400/500。
gray-300 在这套调色板里是**分隔线档**(全仓 68 处 border-gray-300、
当文字只有 5 处),深色下它是 61,68,81,落在深卡上 1.49:1;
而 gray-400 在深色 4.66:1、浅色白卡 2.54:1,两端都更好。
3. 判据:theme.test 补 3 条(手写 CSS 不许有绕过主题的硬编码白色表面 /
深色卡片 alpha 必须降低 / **按实际 alpha 合成后**正文须 ≥4.5:1,
即把 1.07:1 那个事故写成可计算的断言)。background.test 那条
「.dark 里不许出现 --nav-*」**方向反转**为「必须有且底暗字亮」——
它原来守的是「还没有深色主题」这个前提,其注释本就写明
「真做深色主题时这条要一起改」。
验证(不是"改了就算"):
· 自建探针遍历 **9 个页面**(三个通信子页签 / 邮件详情 / 日历 / 联系人 /
我的 / 写信 / 地址补全弹层):修复前通信 14 处、日历 74 处、
联系人 13 处低于 WCAG AA;修复后 **9/9 页面 0 处**。
· 三条新判据逐条**变异自检**(还原修复即变红,且失败信息自带药方);
浅色三个取色值与改动前**逐字节一致**(导航 0.72 白玻璃、卡片 0.92 白)⇒ 零回归。
· theme.test 34 通过 / background.test 44 通过 / tsc 干净。
· 已按 deploy/redeploy-gateway.sh 部署到 systemd 实例,后置清单自动项全绿,
并在生产实例上复量 9 个页面(同为 0 处)+ 端到端发信(状态 read,非仅入库)。
#深色模式 #可读性 #WCAG