direv/admin_new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
857cec4290
admin_new/src/theme/themes.scss
Sisyphus 3fc8326aeb 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 下清晰可读
2026-07-09 17:29:04 +08:00

230 lines
7.1 KiB
SCSS
Raw Blame History

// F006 4 套预置主题
// 默认 = 科技蓝,通过 <body data-theme="..."> 切换
// W5.x v2 Design Language 升级(2026-07-03)
// 改动:
// + 每主题加 --chart-1/2/3/4(图表色)
// + dark 主题微调 login glow 提亮
// ============ 1. 科技蓝(默认, Stripe/Supabase 风) ============
:root,
[data-theme="tech-blue"] {
// 中性
--bg: #FFFFFF;
--bg-soft: #F8FAFC;
--surface: #FFFFFF;
--surface-2: #F1F5F9;
--border: #E2E8F0;
--border-strong: #CBD5E1;
--ink: #0F172A;
--ink-2: #334155;
--ink-3: #64748B;
--ink-4: #94A3B8;
// 品牌
--brand: #2563EB;
--brand-2: #1D4ED8;
--brand-soft: #DBEAFE;
--brand-hover: #1E40AF;
--brand-glow: rgba(37, 99, 235, 0.15);
// 登录页渐变
--login-grad-1: #EFF6FF;
--login-grad-2: #DBEAFE;
--login-grad-3: #E0E7FF;
--login-glow-1: rgba(37, 99, 235, 0.18);
--login-glow-2: rgba(124, 58, 237, 0.10);
// 语义
--green: #059669;
--green-soft: #D1FAE5;
--amber: #D97706;
--amber-soft: #FEF3C7;
--red: #DC2626;
--red-soft: #FEE2E2;
--purple: #7C3AED;
--purple-soft: #EDE9FE;
// v2 图表色
--chart-1: #2563EB;
--chart-2: #7C3AED;
--chart-3: #059669;
--chart-4: #D97706;
// W5.x EP 派生色重定向(主题色适配全局修复)
--el-color-primary: var(--brand);
--el-color-primary-light-3: var(--brand-soft);
--el-color-primary-light-5: var(--brand-soft);
--el-color-primary-light-7: var(--brand-soft);
--el-color-primary-light-8: var(--brand-soft);
--el-color-primary-light-9: var(--brand-soft);
--el-color-primary-dark-2: var(--brand-hover);
}
// ============ 2. 中国红 ============
[data-theme="red"] {
--bg: #FFFFFF;
--bg-soft: #FAFAF9;
--surface: #FFFFFF;
--surface-2: #F5F5F4;
--border: #E7E5E4;
--border-strong: #D6D3D1;
--ink: #1C1917;
--ink-2: #44403C;
--ink-3: #78716C;
--ink-4: #A8A29E;
--brand: #DC2626;
--brand-2: #B91C1C;
--brand-soft: #FEE2E2;
--brand-hover: #991B1B;
--brand-glow: rgba(220, 38, 38, 0.15);
--login-grad-1: #FEF2F2;
--login-grad-2: #FECACA;
--login-grad-3: #FFE4E6;
--login-glow-1: rgba(220, 38, 38, 0.20);
--login-glow-2: rgba(245, 158, 11, 0.12);
--green: #15803D;
--green-soft: #DCFCE7;
--amber: #B45309;
--amber-soft: #FEF3C7;
--red: #DC2626;
--red-soft: #FEE2E2;
--purple: #7E22CE;
--purple-soft: #F3E8FF;
--chart-1: #DC2626;
--chart-2: #7E22CE;
--chart-3: #15803D;
--chart-4: #B45309;
// W5.x EP 派生色重定向(主题色适配全局修复)
--el-color-primary: var(--brand);
--el-color-primary-light-3: var(--brand-soft);
--el-color-primary-light-5: var(--brand-soft);
--el-color-primary-light-7: var(--brand-soft);
--el-color-primary-light-8: var(--brand-soft);
--el-color-primary-light-9: var(--brand-soft);
--el-color-primary-dark-2: var(--brand-hover);
}
// ============ 3. 深空紫 ============
[data-theme="purple"] {
--bg: #FFFFFF;
--bg-soft: #FAF9F7;
--surface: #FFFFFF;
--surface-2: #F7F6F3;
--border: #E8E6E1;
--border-strong: #D6D3CC;
--ink: #37352F;
--ink-2: #787774;
--ink-3: #9B9A97;
--ink-4: #B5B4B0;
--brand: #5645D4;
--brand-2: #4736BC;
--brand-soft: #EDEBFC;
--brand-hover: #392BA0;
--brand-glow: rgba(86, 69, 212, 0.15);
--login-grad-1: #F3F1FE;
--login-grad-2: #E8E5FB;
--login-grad-3: #FCE7F3;
--login-glow-1: rgba(86, 69, 212, 0.20);
--login-glow-2: rgba(236, 72, 153, 0.10);
--green: #0F7B6C;
--green-soft: #DBEDEA;
--amber: #C76E29;
--amber-soft: #F8EAD9;
--red: #C4554D;
--red-soft: #F8E2DF;
--purple: #5645D4;
--purple-soft: #EDEBFC;
--chart-1: #5645D4;
--chart-2: #C4554D;
--chart-3: #0F7B6C;
--chart-4: #C76E29;
// W5.x EP 派生色重定向(主题色适配全局修复)
--el-color-primary: var(--brand);
--el-color-primary-light-3: var(--brand-soft);
--el-color-primary-light-5: var(--brand-soft);
--el-color-primary-light-7: var(--brand-soft);
--el-color-primary-light-8: var(--brand-soft);
--el-color-primary-light-9: var(--brand-soft);
--el-color-primary-dark-2: var(--brand-hover);
}
// ============ 4. 暗夜黑(深色模式) ============
// W3.6 优化: 边/分组小标题调亮, hover 区分度, 表格条纹
// W5.x v2 微调: --login-glow-1/2 提亮(0.18→0.22 / 0.10→0.14)
[data-theme="dark"] {
--bg: #0B1120;
--bg-soft: #0F172A;
--surface: #1E293B;
--surface-2: #283449;
--border: #475569;
--border-strong: #64748B;
--ink: #F8FAFC;
--ink-2: #E2E8F0;
--ink-3: #CBD5E1;
--ink-4: #94A3B8;
--brand: #60A5FA;
--brand-2: #3B82F6;
--brand-soft: rgba(96, 165, 250, 0.15);
--brand-hover: #93C5FD;
--brand-glow: rgba(96, 165, 250, 0.25);
--login-grad-1: #1E293B;
--login-grad-2: #0F172A;
--login-grad-3: #1E1B4B;
--login-glow-1: rgba(96, 165, 250, 0.22);
--login-glow-2: rgba(139, 92, 246, 0.14);
--green: #34D399;
--green-soft: rgba(52, 211, 153, 0.15);
--amber: #FBBF24;
--amber-soft: rgba(251, 191, 36, 0.15);
--red: #F87171;
--red-soft: rgba(248, 113, 113, 0.15);
--purple: #A78BFA;
--purple-soft: rgba(167, 139, 250, 0.15);
--chart-1: #60A5FA;
--chart-2: #A78BFA;
--chart-3: #34D399;
--chart-4: #FBBF24;
// W5.x EP 派生色重定向(主题色适配全局修复)
--el-color-primary: var(--brand);
--el-color-primary-light-3: var(--brand-soft);
--el-color-primary-light-5: var(--brand-soft);
--el-color-primary-light-7: var(--brand-soft);
--el-color-primary-light-8: var(--brand-soft);
--el-color-primary-light-9: var(--brand-soft);
--el-color-primary-dark-2: var(--brand-hover);
// W18 dark 主题适配:EP 内部 SCSS 常量重写
// :root 块里 var(--xxx) 解析时, dark 块的重写还未生效, 必须用实际值硬编码
--el-color-white: #1E293B; /* surface */
--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-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-tooltip-bg-color: #1E293B; /* surface */
--el-disabled-bg-color: #0F172A; /* bg-soft */
--el-disabled-text-color: #94A3B8; /* ink-4 */
--el-disabled-border-color: #475569;
}
Reference in New Issue View Git Blame Copy Permalink