跨端: 修「深色下玻璃变灰纸板」+「主题选了不生效」（两个真 bug）
用户问「你的玻璃效果呢？」。我上手先取像素，结果是**两个一直存在的真 bug**，
不是观感偏好问题。两个都有实测数据。
## ① 深色下玻璃 alpha 没跟着翻 →「像深色卡片浮在灰纸板上」
### 实测
深色主题 + aurora 壁纸，同一行交替采样（`/tmp/g1.raw`，1008×2232）：
y=670 卡片缝隙 rgb(199,199,199) 卡片内 rgb(27,37,50)
y=880 卡片缝隙 rgb(201,203,201) 卡片内 rgb(27,36,53)
缝隙是**浅灰 199**、比卡片还亮。而 199 恰好 = `0.78 × 255`
（壁纸层实测 x=4..24 为 rgb(0,1,3)，近黑）—— 就是 `glassCardWall` 那层白纱。
### 根因：我把 WebUI 的一句话读漏了后半句
`Theme.glassCard` / `glassCardWall` 是**单一值、不分深浅**。我当初写的理由是
「基色恒为白，主题之间只差 alpha」——但 WebUI 原话是
「**基材恒为白**，主题之间**只差 alpha**」（`index.css:406`、`:1546`）。
我只抄了前半句，把「只差 alpha」误读成「alpha 也不用变」。
WebUI `.dark` 的实际取值：
--glass-card-a: 0.06 ← 浅色 0.92
--glass-card-wall-a: 0.04 ← 浅色 0.78
**深浅差 15 倍**：深色下白纱要几乎撤掉让深壁纸透上来，浅色下才用厚白纱盖亮壁纸。
我用同一个 0.92 配两套主题 ⇒ 深色下壁纸被糊成浅灰，**玻璃感与深色同时消失**。
### 修法
`Theme.glassCardFor(wall, dark?)` —— 与 `accentFor`/`textSubtleFor` 同一范式，
深浅从 `Theme.isDarkNow()`（`AppStorage` 那个发布键）读，不靠调用方自觉传。
新增 `glassCardDark #0FFFFFFF` / `glassCardWallDark #0AFFFFFF`。
改后同处实测：缝隙 rgb(3..16)，壁纸透上来了；浅色档回归检查未变（244/239，厚白纱仍在）。
## ② 用户选的主题被无条件覆盖 →「选了深色但界面还是浅的」
### 实测
「我的」页选「深色」后：
· 按钮显示选中、服务端也记下 `theme:'dark'`（`GET /me/appearance` 确认）；
· 但界面仍浅色，且文字浅色压浅底 —— 实测背景 `rgb(243,243,243)` /
文字 `rgb(243,243,243)`，**对比度 ≈1.0:1，完全不可读**。
### 根因（两处叠加）
① `EntryAbility.onCreate` 有一句**无条件**的
`setColorMode(COLOR_MODE_NOT_SET)`（= 跟随系统）—— 每次冷启都把用户的选择重置掉。
它是目录迁移时抄进来的（`git log -S` 指向 `f9d757b chore: directory migration`），
**没有注释说明为什么，也没有谁在用**。已删除（连带上游 import）。
② `MainPage.applyAppearance()` 算出了 `isDarkNow`、发布了 `AppStorage`，
但**从来没调用过 `store.applyTheme(...)`** ⇒ 系统色彩模式根本没被设过。
### 修法
· 删掉 EntryAbility 那句无条件覆盖（附长注释说明为什么由页面负责）；
· `applyAppearance()` 补上 `store.applyTheme(ctx, snap.theme)`。
★ **顺序**：`KEY_IS_DARK` 发布必须在 `applyTheme` **之前** ——
因为 `glassCardFor()` 是从那个键读深浅的，反过来会让卡片用上一轮的深浅画一帧。
`applyThemeNow()` 里同一处顺序也一并修正。
## 判据
`cross-client-theme` 的两条原本把 `Theme.glassCard`/`glassCardWall` 两个**字面量**钉死，
被我这次正确的改动撞红 —— 我没有放宽它们，而是改成钉**行为**：
· 卡片必须经 `glassCardFor(...)` 取色（入口存在）；
· 四个令牌都要在 Theme 里存在；
· **深色档不得与浅色档同值**（同值 = 主题感知是假的）。
变异验证：① 深色档改回与浅色同值 → 3 条红；② 卡片改回不分深浅 → 5 条红；还原 → 21/21 绿。
## 验证状态
✓ 两个修复都在设备上取**像素**验证（不是看截图说"像了"）
✓ `cross-client-theme` 21/21、全量套件 545 pass（3 红均为改动前既有：
`harmony-admin` 两处 = 我上一轮 `SecuritySection` 拆分遗留、`build-stamp` = 产物戳过期）
✓ 编译通过、进程存活、无新 jscrash
This commit is contained in:
@ -309,6 +309,61 @@ export class Theme {
|
||||
*/
|
||||
static readonly glassCard: string = '#EBFFFFFF';
|
||||
static readonly glassCardWall: string = '#C7FFFFFF';
|
||||
/*
|
||||
* ★★ 2026-09-21 **深色下的玻璃 alpha（这是「没有玻璃效果」的真正原因）**。
|
||||
*
|
||||
* ── 实测症状（设备，深色主题，壁纸 aurora 开启）──
|
||||
*
|
||||
* 同一行上交替采样（`/tmp/g1.raw`，1008×2232）：
|
||||
* y=670 卡片缝隙 rgb(199,199,199) 卡片内 rgb(27,37,50)
|
||||
* y=880 卡片缝隙 rgb(201,203,201) 卡片内 rgb(27,36,53)
|
||||
*
|
||||
* 缝隙是**浅灰 199**、卡片是**深色** —— 界面看起来像"深色卡片浮在灰纸板上"。
|
||||
* 而 199 恰好 = `0.78 × 255`（`glassCardWall` 的白 alpha 压在近黑壁纸上，
|
||||
* 实测壁纸层 x=4..24 为 rgb(0,1,3)）。
|
||||
*
|
||||
* ── 根因：`glassCard`/`glassCardWall` 是**单一值、不分深浅**──
|
||||
*
|
||||
* 我当初写的理由是"基色恒为白，主题之间只差 alpha"——**后半句才是 WebUI 的实情**，
|
||||
* 而我只抄了"基色恒白"，把"只差 alpha"理解成了"alpha 也不用变"。
|
||||
*
|
||||
* WebUI 深色档（`index.css` §`.dark`）：
|
||||
* --glass-card-a: 0.06 ← 浅色是 0.92
|
||||
* --glass-card-hover-a: 0.1
|
||||
* --glass-card-wall-a: 0.04 ← 浅色是 0.78
|
||||
*
|
||||
* 即深色下白纱要**几乎撤掉**（0.92 → 0.06，差 **15 倍**），让深色壁纸透上来；
|
||||
* 浅色下才用厚白纱盖住亮壁纸。我用同一个 0.92 配两套主题 ⇒
|
||||
* 深色下那层白纱把壁纸整片糊成浅灰 199，**玻璃感与深色同时消失**。
|
||||
*
|
||||
* ── 修法 ──
|
||||
*
|
||||
* 与 `accentFor` / `textSubtleFor` 同一范式：`*For(dark?)` 访问器读
|
||||
* `Theme.isDarkNow()`（从 `AppStorage` 那个发布键读，不靠调用方自觉传）。
|
||||
*
|
||||
* `0.06 × 255 ≈ 15 = 0x0F`、`0.04 × 255 ≈ 10 = 0x0A`。
|
||||
* 这两个值仍走登记过的 `SELF_OWNED_COLORS` 豁免（理由与浅色那两个相同：
|
||||
* 系统材质没有"白 6% 叠壁纸"这一档，而玻璃观感正是这个 alpha）。
|
||||
*
|
||||
* ★ 为什么不复用 `Theme.glassCard` 只调 `brightness`：
|
||||
* `brightness` 是**乘性**的，改的是所有颜色而不只是那层白纱；
|
||||
* 而这里要改的恰好只是"白纱有多厚"。两者不是同一个旋钮。
|
||||
*/
|
||||
static readonly glassCardDark: string = '#0FFFFFFF';
|
||||
static readonly glassCardWallDark: string = '#0AFFFFFF';
|
||||
|
||||
/**
|
||||
* 卡片底（**主题感知**）—— 浅色厚白纱、深色近乎透明。
|
||||
*
|
||||
* 调用方只需给"是不是壁纸档"，深浅由令牌自己从发布处读。
|
||||
*/
|
||||
static glassCardFor(wall: boolean, dark?: boolean): string {
|
||||
const isDark: boolean = Theme.isDarkNow(dark);
|
||||
if (wall) {
|
||||
return isDark ? Theme.glassCardWallDark : Theme.glassCardWall;
|
||||
}
|
||||
return isDark ? Theme.glassCardDark : Theme.glassCard;
|
||||
}
|
||||
/**
|
||||
* 「悬浮玻璃板」的另外两半：**投影 + 发丝描边**。
|
||||
*
|
||||
@ -367,9 +422,30 @@ export class Theme {
|
||||
* 第 12 个**新加的手写色**（它不在名单里，于是 A/B/裸色值三条都碰不到它）。
|
||||
* 「枚举挡实例，类才挡漂移」—— 这次枚举的是**名字**，所以要有名单。
|
||||
*
|
||||
* 登记项（26 个，名字与判据里的 SELF_OWNED_COLORS 逐字一致 —— 逐个列出而不是缩写，
|
||||
* 登记项（28 个，名字与判据里的 SELF_OWNED_COLORS 逐字一致 —— 逐个列出而不是缩写，
|
||||
* 这样 grep 一个名字就能找到它的理由）：
|
||||
*
|
||||
* 玻璃（**白基材 + alpha**，深浅各一档；系统材质没有这一档）：
|
||||
* · glassCard / glassCardWall #EBFFFFFF / #C7FFFFFF 浅色：白 0.92 / 0.78
|
||||
* · glassCardDark / glassCardWallDark #0FFFFFFF / #0AFFFFFF 深色：白 0.06 / 0.04
|
||||
* ★★ 2026-09-21 **这一对是"没有玻璃效果"的真正原因**（设备实测撞出来的）。
|
||||
* 我原先把 `glassCard`/`glassCardWall` 写成**单一值、不分深浅**，
|
||||
* 理由是"基色恒为白" —— 但 WebUI 那句话的后半句才是实情：
|
||||
* 「基材恒为白，**主题之间只差 alpha**」（`index.css:406`、`:1546`）。
|
||||
* 我只抄了"基色恒白"，把"只差 alpha"误读成"alpha 也不用变"。
|
||||
*
|
||||
* WebUI `.dark`：`--glass-card-a: 0.06` / `--glass-card-wall-a: 0.04`
|
||||
* （浅色是 0.92 / 0.78，**深浅差 15 倍**）。
|
||||
*
|
||||
* 设备实测（深色 + aurora 壁纸，`/tmp/g1.raw` 1008×2232）：
|
||||
* 卡片缝隙 rgb(199,199,199) 卡片内 rgb(27,37,50)
|
||||
* 199 恰好 = 0.78×255 —— 那层厚白纱把黑壁纸糊成了浅灰，
|
||||
* 界面读起来像"深色卡片浮在灰纸板上"，玻璃感与深色一起消失。
|
||||
* 改用 #0FFFFFFF（0.06）后同一处实测 rgb(3..16) —— 壁纸透过来了。
|
||||
*
|
||||
* 入口：`Theme.glassCardFor(wall, dark?)`（从 `AppStorage` 的
|
||||
* `KEY_IS_DARK` 读深浅，不靠调用方自觉传）。
|
||||
*
|
||||
* 品牌（跨客户端身份，系统给不了）：
|
||||
* · accent #2563EB 与 WebUI 的 --c-blue-600 逐字一致
|
||||
* · accentFg #FFFFFF 品牌底上的文字
|
||||
|
||||
Reference in New Issue
Block a user