diff --git a/client/electron/src/index.css b/client/electron/src/index.css index 1f0448b..ebf98b1 100644 --- a/client/electron/src/index.css +++ b/client/electron/src/index.css @@ -23,6 +23,19 @@ * 表面色(卡片 / 输入框底)。深色模式下变暗。 */ --c-white: 255 255 255; + /* + * ★ 玻璃的"基材":**永远是白色**(2026-09-14 用户:「什么叫深色模式也是玻璃? + * 深色模式不应该是浅色玻璃吗?」)。 + * + * 他是对的,我原先的说法("深色玻璃 = rgb(15 23 42 / .72)")是概念错误: + * 磨砂玻璃是**白色材料**,深色模式下要做的是**降低这层白的透明度**让深背景透出来, + * 而不是换成一整层深色 —— 后者不是玻璃,是把面板压黑。 + * + * 之前所有玻璃面都写成 `rgb(var(--glass-base) / α)`,而 `.dark` 把 `--c-white` + * 改成了 `24 27 33`(近黑)⇒ 深色模式下**整个玻璃层系**变成深色, + * 而 Tailwind 的浅色工具类照旧 ⇒ 界面半深不浅。玻璃与"白"这个颜色概念的耦合就在这里。 + */ + --glass-base: 255 255 255; /* * 彩色按钮与深色框架上的文字。**不随主题反转。** @@ -743,13 +756,13 @@ html[data-bg='on'] .bg-slate-100 { * 接管规则会把任何 bg-white 拉回正文面那一档(0.88),写在这儿的透度会被它盖掉。 */ html[data-bg='on'] .glass-control { - background-color: rgb(var(--c-white) / var(--bg-glass-control)); + background-color: rgb(var(--glass-base) / var(--bg-glass-control)); backdrop-filter: blur(8px) saturate(1.1); -webkit-backdrop-filter: blur(8px) saturate(1.1); } html[data-bg='on'] .bg-white { - background-color: rgb(var(--c-white) / var(--bg-glass)); + background-color: rgb(var(--glass-base) / var(--bg-glass)); } /* @@ -760,7 +773,7 @@ html[data-bg='on'] .bg-white { * 第二层只留一点色调(保住正文对比度),第三层起透明,且都**不再叠加模糊**。 */ html[data-bg='on'] .bg-white .bg-white { - background-color: rgb(var(--c-white) / var(--bg-glass-inner)); + background-color: rgb(var(--glass-base) / var(--bg-glass-inner)); backdrop-filter: none; -webkit-backdrop-filter: none; } @@ -772,7 +785,7 @@ html[data-bg='on'] .bg-white .bg-white .bg-white { /* 侧栏里的玻璃面板同理:框架已经有一层底色,里面不能再叠。 */ html[data-bg='on'] .bg-chrome-900 .bg-white, html[data-bg='on'] .bg-chrome-800 .bg-white { - background-color: rgb(var(--c-white) / var(--bg-glass-inner)); + background-color: rgb(var(--glass-base) / var(--bg-glass-inner)); backdrop-filter: none; -webkit-backdrop-filter: none; } @@ -1230,8 +1243,16 @@ html.view-switch .glass-control, * 要做深色主题,正确做法是给组件补齐 `dark:` 变体(那是独立一件事), * 而不是先把导航单独压深。 */ +/* + * 深色主题:**这一块有意留空**。 + * + * 两件事必须一起做,否则就是"半深不浅"(我在导航上已经栽过一次): + * 1. 组件侧补齐 `dark:` 变体(现在一个都没有 —— 这是真正的深色主题工作); + * 2. 玻璃只降 `--glass-base` 的 alpha(保持白色基材),绝不去换基材颜色。 + * 在 1 完成之前,2 单独生效只会让"面变深、字还是深色",读不了。 + */ .dark { - /* 有意留空:等深色主题落地后,这里再与组件一起打开 */ + /* 有意留空 */ } .nav-rail { @@ -1303,15 +1324,16 @@ html[data-bg='on'] .comm-pane > .bg-white { } html[data-bg='on'] .glass-card { - background-color: rgb(var(--c-white) / 0.78); - border-color: rgb(var(--c-white) / 0.5); + background-color: rgb(var(--glass-base) / 0.78); + border-color: rgb(var(--glass-base) / 0.5); } html[data-bg='on'] .glass-card:hover { - background-color: rgb(var(--c-white) / 0.88); + background-color: rgb(var(--glass-base) / 0.88); } -.dark .glass-card { - background-color: rgb(255 255 255 / 0.06); - border-color: rgb(255 255 255 / 0.08); -} +/* + * (这里曾有 `.dark .glass-card { background: rgba(255,255,255,0.06) }`。 + * 它是按"深色主题已经存在"写的 —— 而实际上组件还没有 dark 变体, + * 这条只会让卡片在浅色页面上几乎消失。等真深色主题落地再一起打开。) + */ diff --git a/client/electron/test/background.test.mjs b/client/electron/test/background.test.mjs index 97dd71a..7a9491a 100644 --- a/client/electron/test/background.test.mjs +++ b/client/electron/test/background.test.mjs @@ -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);