mirror of
https://github.com/Syngnat/GoNavi.git
synced 2026-08-11 09:13:36 +08:00
🎨 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:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user