238 lines
7.3 KiB
SCSS
238 lines
7.3 KiB
SCSS
// 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;
|
|
--primary: var(--brand);
|
|
--primary-soft: var(--brand-soft);
|
|
--brand-glow: rgba(37, 99, 235, 0.15);
|
|
// 登录页渐变
|
|
--login-grad-1: #C7DBF7;
|
|
--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;
|
|
--primary: var(--brand);
|
|
--primary-soft: var(--brand-soft);
|
|
--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;
|
|
--primary: var(--brand);
|
|
--primary-soft: var(--brand-soft);
|
|
--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;
|
|
--primary: var(--brand);
|
|
--primary-soft: var(--brand-soft);
|
|
--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;
|
|
}
|