fix(F006-W18.8): dark 主题 按钮 + 文字 颜色修复 (CSS 变量级联全部硬编码)

用户反馈: 暗主题下默认 el-button (如导出/重置) 文字几乎看不见

根因 (同类 W18 修复):
- tokens.scss :root 块定义 --el-text-color-regular: var(--ink-2) / --el-border-color: var(--border)
- CSS 变量解析时, [data-theme=dark] 块的 --ink-2 重写还未生效
- 导致 dark 下 --el-text-color-regular 仍是 tech-blue 默认 #334155 (深色字 on 深色背景 = 不可见)
- 按钮 border --el-border-color 仍是 #E2E8F0 (浅色边 on 暗背景 = 刺眼)

修法 (themes.scss [data-theme=dark] 块硬覆盖):
- --el-text-color-primary/regular/secondary/placeholder/disabled → #F8FAFC/#E2E8F0/#CBD5E1/#94A3B8
- --el-border-color/light/lighter/extra-light → #475569 (border)
- --el-border-color-dark/darker → #64748B (border-strong)
- --el-fill-color/light → #0F172A (bg-soft)
- --el-fill-color-lighter/extra-light/dark/darker → #283449 (surface-2)
- --el-fill-color-blank/bg-color/overlay → #1E293B (surface)
- --el-bg-color-page → #0F172A (bg-soft)
- --el-tooltip-bg-color → #1E293B
- --el-disabled-* → 配套浅色

Playwright dark 主题实测 (商品管理页 导出/重置 按钮):
- 改前: bg rgb(30,41,59) 但 color rgb(51,65,85) = #334155 (看不见)
- 改后: color rgb(226,232,240) = #E2E8F0 (清晰), border rgb(71,85,105) = #475569 (协调)
- --el-text-color-regular 改前 #334155 → 改后 #E2E8F0 ✅
- 截图确认: 导出/重置/新增商品/查询 全部按钮在 dark 下清晰可读
This commit is contained in:
Sisyphus 2026-07-09 17:29:04 +08:00
parent ee52bed129
commit 3fc8326aeb

View File

@ -193,15 +193,37 @@
--el-color-primary-dark-2: var(--brand-hover); --el-color-primary-dark-2: var(--brand-hover);
// W18 dark 主题适配:EP 内部 SCSS 常量重写 // W18 dark 主题适配:EP 内部 SCSS 常量重写
// :root 块里 --el-color-white 解析为 var(--surface), 但解析时 surface 还未被 dark 块重写 // :root 块里 var(--xxx) 解析时, dark 块的重写还未生效, 必须用实际值硬编码
// 这里用 dark 主题的实际值硬编码, 不依赖 var() 链
--el-color-white: #1E293B; /* surface */ --el-color-white: #1E293B; /* surface */
--el-color-black: #F8FAFC; /* ink */ --el-color-black: #F8FAFC; /* ink */
--el-fill-color-blank: #1E293B; /* surface */ --el-text-color-primary: #F8FAFC; /* ink */
--el-fill-color-light: #0F172A; /* bg-soft (row hover) */ --el-text-color-regular: #E2E8F0; /* ink-2 */
--el-table-tr-bg-color: #1E293B; /* surface */ --el-text-color-secondary: #CBD5E1; /* ink-3 */
--el-table-bg-color: #1E293B; /* surface */ --el-text-color-placeholder: #94A3B8; /* ink-4 */
--el-text-color-disabled: #94A3B8; /* ink-4 */
--el-border-color: #475569; /* border */
--el-border-color-light: #475569;
--el-border-color-lighter: #475569;
--el-border-color-extra-light: #475569;
--el-border-color-dark: #64748B; /* border-strong */
--el-border-color-darker: #64748B;
--el-fill-color: #0F172A; /* bg-soft */
--el-fill-color-light: #0F172A;
--el-fill-color-lighter: #283449; /* surface-2 */
--el-fill-color-extra-light: #283449;
--el-fill-color-dark: #283449;
--el-fill-color-darker: #283449;
--el-fill-color-blank: #1E293B; /* surface */
--el-bg-color: #1E293B;
--el-bg-color-page: #0F172A; /* bg-soft */
--el-bg-color-overlay: #1E293B;
--el-table-tr-bg-color: #1E293B; /* surface */
--el-table-bg-color: #1E293B;
--el-table-expanded-cell-bg-color: #1E293B; --el-table-expanded-cell-bg-color: #1E293B;
--el-table-header-bg-color: #283449; /* surface-2 (表头略亮区分) */ --el-table-header-bg-color: #283449; /* surface-2 (表头略亮区分) */
--el-table-row-hover-bg-color: #0F172A; /* bg-soft */ --el-table-row-hover-bg-color: #0F172A; /* bg-soft */
--el-tooltip-bg-color: #1E293B; /* surface */
--el-disabled-bg-color: #0F172A; /* bg-soft */
--el-disabled-text-color: #94A3B8; /* ink-4 */
--el-disabled-border-color: #475569;
} }