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:
parent
ee52bed129
commit
3fc8326aeb
@ -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-text-color-primary: #F8FAFC; /* ink */
|
||||||
|
--el-text-color-regular: #E2E8F0; /* ink-2 */
|
||||||
|
--el-text-color-secondary: #CBD5E1; /* ink-3 */
|
||||||
|
--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-fill-color-blank: #1E293B; /* surface */
|
||||||
--el-fill-color-light: #0F172A; /* bg-soft (row hover) */
|
--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-tr-bg-color: #1E293B; /* surface */
|
||||||
--el-table-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;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user