🎨 style(about): 修正开关与更新通道选择器的主题色一致性

- 修复 v2 深色下「自动检查更新」开关显示为琥珀色:旧版 UI 的
  body[data-theme='dark'] .ant-switch.ant-switch-checked 用了两个类,特异性高于
  v2-theme.css 的 .ant-switch-checked,即便 v2 样式后加载也会被压过。
  给旧版规则加 :not([data-ui-version='v2']) 限定,让 v2 的 --gn-accent 生效
- 同一根因的 .ant-radio:hover 琥珀描边一并限定(v2 未覆盖该选择器,同样会泄漏)
- 更新通道选择器改为主题色实心胶囊:原深色下选中态 rgba(30,41,59,.98) 与容器底
  rgba(15,23,42,.55) 对比极低,选中状态几乎不可辨且未体现主题色。
  选中项与切换滑块统一用 var(--gn-accent) + 白字,未选项透明底、hover 微亮,
  并补充跟随主题色的键盘焦点环
- --gn-accent 仅在 v2 下定义,故新规则限定 v2 作用域,旧版 UI 保留原中性配色

未加测试:两处均为纯 CSS 视觉改动,jsdom 不加载外部样式表、无法断言计算样式;
且项目已立规约禁止新增读取源码文本的断言型测试(src/testPolicy.test.ts)。
已通过 tsc --noEmit 与 useAppUpdateManager/customThemeStore/v2ThemeModalConfirm/testPolicy 共 34 项测试。
This commit is contained in:
Syngnat
2026-07-26 21:18:27 +08:00
parent 3ea04f5530
commit bb3a6ee577

View File

@@ -337,11 +337,15 @@ body[data-theme='dark'] .ant-radio-checked .ant-radio-inner {
}
body[data-theme='dark'] .ant-radio-wrapper:hover .ant-radio-inner,
body[data-theme='dark'] .ant-radio:hover .ant-radio-inner {
/* 这两条是旧版 UI 的琥珀强调色,必须排除 v2
v2 的强调色是绿色v2-theme.css 的 --gn-accent 与 antd colorPrimary 均为绿),
而这里的选择器特异性更高(.ant-switch.ant-switch-checked 是两个类),
即便 v2-theme.css 后加载也会被这里压过,导致 v2 下的开关/单选显示成琥珀色。 */
body[data-theme='dark']:not([data-ui-version='v2']) .ant-radio:hover .ant-radio-inner {
border-color: #f6c453 !important;
}
body[data-theme='dark'] .ant-switch.ant-switch-checked {
body[data-theme='dark']:not([data-ui-version='v2']) .ant-switch.ant-switch-checked {
background: #d8a93b !important;
}
@@ -1879,6 +1883,37 @@ body[data-theme='dark'] .gonavi-about-update-channel .ant-segmented-item-selecte
color: #f8fafc !important;
}
/* ── 更新通道:选中项使用主题强调色实心胶囊 ──────────────
原先深色下选中态是 rgba(30,41,59,.98),与容器底 rgba(15,23,42,.55) 对比极低,
选中状态几乎看不出来,且完全没有体现主题色。
--gn-accent 仅在 v2 下定义,因此这里限定 v2 作用域;旧版 UI 保留其自身的中性配色。
ant-segmented-thumb 是切换时的滑动块,必须与选中项同色,否则动画期间会闪回灰底。 */
body[data-ui-version='v2'] .gonavi-about-update-channel .ant-segmented-item-selected,
body[data-ui-version='v2'] .gonavi-about-update-channel .ant-segmented-thumb {
background: var(--gn-accent) !important;
box-shadow: none !important;
}
body[data-ui-version='v2'] .gonavi-about-update-channel .ant-segmented-item-selected .ant-segmented-item-label {
color: #ffffff !important;
}
/* 未选项:透明底 + hover 时微亮,避免与选中胶囊争夺注意力。 */
body[data-ui-version='v2'] .gonavi-about-update-channel .ant-segmented-item:not(.ant-segmented-item-selected) {
background: transparent !important;
}
body[data-ui-version='v2'] .gonavi-about-update-channel .ant-segmented-item:not(.ant-segmented-item-selected):hover .ant-segmented-item-label {
color: var(--gn-fg-1) !important;
}
/* 键盘可达性Segmented 的焦点环也跟随主题色。 */
body[data-ui-version='v2'] .gonavi-about-update-channel .ant-segmented-item-input:focus-visible + .ant-segmented-item-label {
outline: 2px solid var(--gn-accent) !important;
outline-offset: -2px;
border-radius: 4px;
}
/* ── Theme settings (v2 only): clean desktop settings ─── */
body .gonavi-theme-settings {
--gn-settings-fg: #0f172a;