From 3fc8326aeb426d2db7124368f3e9ab96f8c56812 Mon Sep 17 00:00:00 2001 From: Sisyphus Date: Thu, 9 Jul 2026 17:29:04 +0800 Subject: [PATCH] =?UTF-8?q?fix(F006-W18.8):=20dark=20=E4=B8=BB=E9=A2=98=20?= =?UTF-8?q?=E6=8C=89=E9=92=AE=20+=20=E6=96=87=E5=AD=97=20=E9=A2=9C?= =?UTF-8?q?=E8=89=B2=E4=BF=AE=E5=A4=8D=20(CSS=20=E5=8F=98=E9=87=8F?= =?UTF-8?q?=E7=BA=A7=E8=81=94=E5=85=A8=E9=83=A8=E7=A1=AC=E7=BC=96=E7=A0=81?= =?UTF-8?q?)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 用户反馈: 暗主题下默认 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 下清晰可读 --- src/theme/themes.scss | 38 ++++++++++++++++++++++++++++++-------- 1 file changed, 30 insertions(+), 8 deletions(-) diff --git a/src/theme/themes.scss b/src/theme/themes.scss index db41e35..8f04a54 100644 --- a/src/theme/themes.scss +++ b/src/theme/themes.scss @@ -193,15 +193,37 @@ --el-color-primary-dark-2: var(--brand-hover); // W18 dark 主题适配:EP 内部 SCSS 常量重写 - // :root 块里 --el-color-white 解析为 var(--surface), 但解析时 surface 还未被 dark 块重写 - // 这里用 dark 主题的实际值硬编码, 不依赖 var() 链 + // :root 块里 var(--xxx) 解析时, dark 块的重写还未生效, 必须用实际值硬编码 --el-color-white: #1E293B; /* surface */ --el-color-black: #F8FAFC; /* ink */ - --el-fill-color-blank: #1E293B; /* surface */ - --el-fill-color-light: #0F172A; /* bg-soft (row hover) */ - --el-table-tr-bg-color: #1E293B; /* surface */ - --el-table-bg-color: #1E293B; /* surface */ + --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-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-header-bg-color: #283449; /* surface-2 (表头略亮区分) */ - --el-table-row-hover-bg-color: #0F172A; /* bg-soft */ + --el-table-header-bg-color: #283449; /* surface-2 (表头略亮区分) */ + --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; }