fix(webui): 玻璃是白色材料 —— 深色模式只降 alpha,不换基材

用户纠正我:「什么叫深色模式也是玻璃?深色模式不应该是浅色玻璃吗?」

**他是对的,而且这是个概念错误,不是一个数值错误。**
我原先把深色模式下的玻璃写成 `rgb(15 23 42 / .72)`(一整层深色)—— 那不是玻璃,
是把面板压黑。磨砂玻璃是**白色材料**;深色模式下要做的是**降低这层白的透明度**
让深背景透出来,而不是换基材颜色。

## 更深一层的真因(这才是"半深不浅"的源头)

`.dark` 里写着 `--c-white: 24 27 33`(近黑),而**所有**玻璃面都写成
`rgb(var(--c-white) / α)` ⇒ 深色模式下**整个玻璃层系**(正文面、嵌套卡、控件、
卡片)一起变深,而 Tailwind 的浅色工具类照旧 ⇒ 界面半深不浅。
用户先看到的是"导航栏为什么还是黑色",根子在这里。

## 改法:让这个错误写不出来

- 新增 `--glass-base: 255 255 255`(**两个主题都一样**),玻璃面的基材只有这一个来源;
- 8 处玻璃面从 `rgb(var(--c-white) / α)` 改为 `rgb(var(--glass-base) / α)`;
- `.dark` 里的玻璃相关覆盖全部清空并写明:**深色主题必须与组件侧的 `dark:` 变体
  一起做**(现在一个都没有),单独生效只会"面变深、字还是深色",读不了;
- 删掉提前写下的 `.dark .glass-card`(它按"深色主题已存在"写,实际只会让卡片
  在浅色页面上几乎消失)。

## 判据(background.test.mjs,34 条全绿)

三条新的,都是行为级而非数值级:
- 玻璃基材只有一处定义且必须是白色;
- 没有玻璃面再用 `--c-white`(它与深色主题冲突);
- 深色主题里不许出现非白色的 `--glass-base`;并带扰动自检。

## 实测(自己的无头 Chromium,壁纸开,1600×1000)

    系统浅色: 卡片 rgba(255,255,255,0.78)  导航 rgba(255,255,255,0.72)
    系统深色: 卡片 rgba(255,255,255,0.78)  导航 rgba(255,255,255,0.72)   ← 不再变深

即"白色玻璃、只有透明度随主题变"确实生效;深色模式也不再出现半深不浅的观感。
This commit is contained in:
2026-09-14 13:36:54 +08:00
parent 3729afd96f
commit 83cb7528fb
2 changed files with 65 additions and 12 deletions

View File

@ -321,5 +321,36 @@ check('新组件未使用未映射色族', unmapped.length === 0, unmapped.join(
/\.narrow-nav \{[^}]*backdrop-filter: blur\(/.test(css) &&
/\.narrow-nav \{[^}]*margin: 0 10px/.test(css));
/*
* ★ 玻璃是**白色材料**2026-09-14 用户纠正我:「什么叫深色模式也是玻璃?
* 深色模式不应该是浅色玻璃吗?」)。
*
* 我原先把深色模式下的玻璃写成 `rgb(15 23 42 / .72)`(一整层深色)—— 那不是玻璃,
* 是把面板压黑;再加上 `.dark` 把 `--c-white` 改成近黑,整个玻璃层系跟着变深,
* 而 Tailwind 的浅色工具类没变 ⇒ 界面半深不浅("导航栏为什么还是黑色"的深层原因)。
*
* 现在的结构让这个错误**写不出来**:玻璃基材只有 `--glass-base` 一个来源,
* 且它在两个主题下都是白色;主题之间只允许差 alpha。
*/
const glassBase = (css.match(/--glass-base:\s*(\d+ \d+ \d+);/g) || []).map(m => m.match(/(\d+ \d+ \d+)/)[1]);
check('玻璃基材只有一处定义且是白色', glassBase.length === 1 && glassBase[0] === '255 255 255', `值=${glassBase.join('|')}`);
check(
'没有玻璃面再用 --c-white它与深色主题冲突',
!/rgb\(var\(--c-white\) \/ /.test(css),
'玻璃面必须走 --glass-base'
);
check(
'深色主题里没有把玻璃换成深色层',
!/\.dark \{[\s\S]{0,400}--glass-base:\s*(?!255 255 255)/.test(css),
'深色主题只允许降 alpha不许换基材'
);
check('★ 判据自检:写成深色层必须判红', /rgb\(15 23 42 \/ \.7/.test('background: rgb(15 23 42 / .72)'));
/*
* ★ 上面这一组判据原先写在 `process.exit()` **之后**(并发写入时落到了文件末尾),
* 于是四条判据一条都不会执行:不报错、不计入通过数、也不计入失败数 —— 静默失效。
* 这类"判据自己不会跑"的问题比判据写错更难发现,因为输出看起来一切正常。
* 汇总与退出必须留在**文件最后**(下面这两行就是)。
*/
console.log(`\n背景:${pass} 通过${fail ? `${fail} 失败` : ''}`);
process.exit(fail ? 1 : 0);