fix(F006-W18.9): dark 主题 全局滚动条深色适配 (避免浅白滚动条割裂)

用户反馈: 暗主题下侧边栏原生滚动条是浅白色, 在深色背景上刺眼割裂

根因: 浏览器原生 ::-webkit-scrollbar 走系统默认色 (亮色),
项目没覆盖, dark 下没适配

修法 (src/styles/global-popper.scss 末尾新增):
- 默认 (亮主题): thumb var(--border) 浅灰
- hover: var(--ink-4) 深灰
- [data-theme=dark]: thumb var(--border) = #475569 深色
- hover: var(--ink-3) = #CBD5E1
- Firefox 兼容: html { scrollbar-color: var(--border) transparent; }

Playwright 实测 (.rr-sidebar 滚动条 thumb):
- 改前: 系统默认 #C0C0C0 浅灰 (刺眼)
- 改后: rgb(71,85,105) = #475569 深色 ✅ (dark 协调)
This commit is contained in:
Sisyphus 2026-07-09 17:38:14 +08:00
parent 3fc8326aeb
commit ff4c9bc140

View File

@ -87,3 +87,37 @@
.el-select__wrapper.is-focused {
box-shadow: 0 0 0 1px var(--brand, #2563EB) inset, 0 0 0 3px var(--brand-glow, rgba(37, 99, 235, 0.18)) !important;
}
/* === W18.9 全局滚动条暗主题适配 (深色滚动条避免割裂) === */
/* 默认 (亮主题): 浅灰滚动条 */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: var(--border, #E2E8F0);
border-radius: 4px;
transition: background 0.15s;
}
::-webkit-scrollbar-thumb:hover {
background: var(--ink-4, #94A3B8);
}
/* Firefox */
html {
scrollbar-color: var(--border, #E2E8F0) transparent;
scrollbar-width: thin;
}
/* 暗主题: 深色滚动条适配, 避免浅白滚动条在深色背景上刺眼 */
[data-theme="dark"] ::-webkit-scrollbar-thumb {
background: var(--border, #475569);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
background: var(--ink-3, #CBD5E1);
}
[data-theme="dark"] html {
scrollbar-color: var(--border, #475569) transparent;
}