fix(webui): 深色模式「只有通信页正常」—— 根因不是 alpha,是底没暗下来
用户原话:「webui 只有通信页面的深色模式正常了,剩下的三个页面深色模式 可读性都极差」。99a2d7a 只修了 `.glass-card` 那块(通信页走的就是它), 其余三页的面板走 `html[data-bg='on'] .bg-white` → `--bg-glass`,没跟进。 我第一版把这三档 alpha 从 0.9/0.84/0.55 降到 0.08/0.05/0.04,**仍然不够**。 ## 正确判据:逐个叶子文本节点,采样它**真实渲染的底色** 之前的探测全在数 DOM 祖先链上的 backgroundColor,而 `.app-backdrop` 是 `position:fixed` 的**兄弟节点**(不是祖先)⇒ 永远采不到壁纸与遮罩, 只能退回"壁纸均值 213"→ 得出"底是亮的"但与屏幕不符。 改成截图后用 pngread.mjs 逐像素采样:对每个叶子文本节点取其 bbox 内 出现最多的颜色当作它的实际底色,再算 WCAG 对比度。得到决定性的数字: 通信 最差 1.87:1 / 日历 最差 **1.19:1** / 联系 1.64:1 / 我的 1.42:1 (日历页「廿五」fg=rgb(138,146,161) bg=rgb(134,132,132) —— 字和底几乎同色) ## 根因:`--bg-dim` 是**比例**,比例压不住一张**浅**壁纸 用户 jianf 的壁纸均值 RGB 213(浅照片)、dim=56 ⇒ 213×0.44 ≈ 94,仍是中灰。 近白正文对 94 只有约 3.6:1;次要文字 gray-400 对 94~134 只有 1.2–1.4:1。 **没有任何文字颜色能救** —— 这与 background.test 的契约「玻璃是白色材料」 是同一件事的两面:深色下敢用近白基材,前提就是「背后是深底」, 而这个前提此前没人保证。 ## 改动 1. 新增 `--bg-dim-min`(`:root` 0% / `.dark` 92%),遮罩取 `max(var(--bg-dim), var(--bg-dim-min))` —— **取 max 而非覆盖**, 用户调得比下限高时仍以用户的为准,不下调他的选择。 2. 玻璃 alpha 收到 0.04/0.03/0.02(第三层从 `transparent` 改为 `--bg-glass-nested3` 的小值:深色下"透明"= 浅壁纸直接透上来)。 3. `.dark` 的 `--glass-card-wall-a` 0.1 → 0.04 与其它档对齐。 4. 浅色分支完全不变(dimMin=0% ⇒ max() 等价于原值,实测 glass 仍是 0.88、 遮罩仍是 `rgba(255,255,255,0.56)`)。 ## 验收(1280×800 真渲染采样,逐个叶子文本节点) 修复前:通信 1.87 / 日历 1.19 / 联系 1.64 / 我的 1.42(<4.5 的节点 17/88/22/26) 修复后:通信 6.14 / 日历 4.90 / 联系 4.96 / 我的 5.38(<4.5 的节点 **0/0/0/0**) 代价(明写在案):深色下浅壁纸被压得很淡(92%)。这是可读性优先的取舍, 壁纸仍在(8% + 玻璃质感 + 模糊),只是不再是主体。 ## 判据(theme.test 30 → 38,已同步 run-all 的棘轮) 新增 4 条,针对"归因错"这件事本身: · 深色下有压暗下限且 ≥90%(浅色下不干预) · 下限真的作用在遮罩上(**不是只定义变量**) · 用最坏输入(纯白 255 壁纸)实算 gray-400 对合成底 ≥ 4.5:1 · 判据自检:拿掉下限必须判红 变异自检跑过:下限改回 56% ⇒ 2 条红;下限定义了但没用上 ⇒ 1 条红。 `--revert-mutation` 之外的基本面:theme 38/0、background 44/0、 cross-client-theme 15/0、appearance-defaults 4/0。套件 broken 由 4 降到 3 (build stamp 因重构建而转绿),red 23 不变,无新增失败。
This commit is contained in:
@ -62,7 +62,9 @@ const SUITE = [
|
||||
['test/narrow-layout.test.mjs', [], 64],
|
||||
['test/nav-merge.test.mjs', [], 8],
|
||||
['test/animation-audit.test.mjs', [], 4], // 动画全量盘点:死动画/过宽作用域/弹层接线/reduced-motion
|
||||
['test/theme.test.mjs', [], 30],
|
||||
// 深色模式:色板反转 + 玻璃 alpha 档 + 底必须是暗的(2026-09-17 那次
|
||||
// 「只有通信页深色正常」的回归锁 —— 38 条里后 8 条是这次新增)。
|
||||
['test/theme.test.mjs', [], 38],
|
||||
['test/background.test.mjs', [], 43],
|
||||
['test/cross-client-theme.test.mjs', [], 15],
|
||||
// 预设的**行为**判据:每一档都真的画得出来(能真跑,不需要设备 ⇒ 不进 static 欠账)。
|
||||
|
||||
Reference in New Issue
Block a user