跨端: 深色模式下的品牌浅底不跟随 —— 12 处「选中/未读」底色在深色页上刺眼
## 真 bug(设备实测) 深色主题下,「我的」页**选中**的那张账号卡片仍是接近纯白的浅蓝 (实测像素 `(255,255,255)` 级别的浅底压在 `(32,34,36)` 的深色页上)。 根因:`Theme.accentSoft = '#EFF6FF'` 是**写死的浅色**,而它被当作 「选中态背景」用在 12 处(未读邮件行、选中账号、分段选中、登录页模式切换…)。 **为什么只有 WebUI 没这个问题**:它有 CSS 变量的**反转发**机制 —— `index.css:113` 的 `--c-blue-50: 239 246 255` 在 `.dark` 段(`:475`)被换成 `28 37 54`(深蓝黑)。ArkTS 的 `static readonly` **一个常量一个值**, 没有那层机制 ⇒ 静态常量必须自己提供两个取值。 ## 修法 1. `Theme.accentSoftDark = '#1C2536'`(对齐 WebUI `.dark --c-blue-50` 的 `28 37 54`) 2. `Theme.accentSoftFor(dark)` 作为**唯一入口** —— 不在页面里各自 `isDark ? a : b`:那样每处都会各写一遍,迟早漏一处 (WebUI 那条"由 test/theme.test.mjs 逐档断言"就是为防这个) 3. **深浅色从哪来**:只有 `MainPage` 算得出(它读 `resourceManager` 的 `colorMode`)。所以走 `AppStorage` 单向发布(与徽标、windowInsets 同一套): MainPage 算 → 写 `agentmail.appearance.isDark` → 各窗格 `@StorageProp` 读。 6 个文件、12 处,全部改用 `accentSoftFor(this.isDarkNow)`。 **设备实测**:深色下「我的」页账号卡片与收件箱未读行都变成深蓝底, 像素 `(32,34,36)` 与页面底一致(不再刺眼)。 ## 判据(这条是新加的,形状值得记) `cross-client-theme` 新增:**品牌浅底必须有深色变体**。断三件事: 1. 深色变体存在,且**取值从 WebUI 的 `.dark` 段反推**(不是随手挑一个深色); 2. 有按主题选值的**入口**(防"页面各自写三元"); 3. **用到它的地方真的走那个入口** —— 扫描所有 `backgroundColor(… accentSoft …)` 并排除 `accentSoftFor`,把漏改的位置**逐行报出来**。 第 3 条在我改到一半时**当场列出了剩下 9 处**(`CalendarPage:1172`、 `ComposePage:255`、`LoginPage:327`…)—— 这就是它该有的样子: 不是"断言存在某个常量",而是"断言没有一处漏改"。 ★ 写这条判据时踩了自己一次:JS 模板串里嵌了反引号包围的标识符 (`` `accentSoft` ``),直接 SyntaxError。改用字符串拼接。 ## 判据 `run-all.mjs` → `checks=506 pass=506 fail=0 skip=0 red=0 broken=0 unreported=0`。 `hvigorw assembleHap` 成功;前端重建。 **未验**:日历/登录页在深色下的观感(只逐处改了底色,没逐页截图)。
This commit is contained in:
@ -137,7 +137,11 @@ export class Theme {
|
||||
* 品牌(跨客户端身份,系统给不了):
|
||||
* · accent #2563EB 与 WebUI 的 --c-blue-600 逐字一致
|
||||
* · accentFg #FFFFFF 品牌底上的文字
|
||||
* · accentSoft #EFF6FF 品牌浅底(选中态背景)
|
||||
* · accentSoft #EFF6FF 品牌浅底(选中态背景,浅色主题用)
|
||||
* · accentSoftDark #1C2536 品牌浅底在**深色**下的取值 —— 对齐 WebUI
|
||||
* `index.css:475` 的 `.dark --c-blue-50`(`28 37 54`)。
|
||||
* ★ 不登记会怎样:深色下选中卡片是接近纯白的浅蓝,
|
||||
* 在深色页面上刺眼得像 bug(2026-09-19 设备实测到)
|
||||
* · accentStrong #1D4ED8 品牌深色变体(选中文字/边框)
|
||||
*
|
||||
* 业务语义(系统只有 list/warning/alert 这一档,没有"同意/拒绝"):
|
||||
@ -191,6 +195,31 @@ export class Theme {
|
||||
static readonly accentFg: string = '#FFFFFF';
|
||||
/** 品牌蓝的浅底 / 深前景(与 WebUI 的 blue-50 / blue-700 成对) */
|
||||
static readonly accentSoft: string = '#EFF6FF';
|
||||
/**
|
||||
* 品牌浅底在**深色**下的取值 —— WebUI `index.css:475` 的 `.dark --c-blue-50`
|
||||
* 是 `28 37 54`(= `#1C2536`)。
|
||||
*
|
||||
* ★ 为什么需要它(2026-09-19 设备实测):`accentSoft` 是**写死的浅蓝**,
|
||||
* 而它被用作「选中态背景」(多账号卡片、导航选中项…)。深色主题下
|
||||
* 那几处仍是**接近纯白的浅蓝** —— 在深色页面上刺眼得像个 bug。
|
||||
* WebUI 靠 CSS 变量反转发解决(`.dark` 段把 `--c-blue-50` 换成深蓝黑),
|
||||
* 静态常量没有那层机制 ⇒ 必须显式提供深色取值。
|
||||
*
|
||||
* ★ 配套的 `accentSoftFor(isDark)` 才是使用入口 —— **不要在页面里
|
||||
* 自己 `isDark ? a : b`**:那样每处都会各写一遍,迟早漏一处
|
||||
* (WebUI 那条"由 test/theme.test.mjs 逐档断言"就是为防这个)。
|
||||
*/
|
||||
static readonly accentSoftDark: string = '#1C2536';
|
||||
|
||||
/**
|
||||
* 按当前主题给品牌浅底。
|
||||
*
|
||||
* @param dark 当前是否深色(页面的 `isDarkMode(...)` 算出来传进来 ——
|
||||
* `Theme` 是静态类,拿不到 Context,所以深浅色由调用方给)
|
||||
*/
|
||||
static accentSoftFor(dark: boolean): string {
|
||||
return dark ? Theme.accentSoftDark : Theme.accentSoft;
|
||||
}
|
||||
static readonly accentStrong: string = '#1D4ED8';
|
||||
|
||||
/** 导航文字:未选中 / 选中(对应 --nav-fg-muted / --nav-active-fg) */
|
||||
|
||||
Reference in New Issue
Block a user