/* ============================================ 主题配色 生效条件： 两层结构： 1) 主色基础块 [data-accent="x"] —— 只定义主色，任何明暗都能用 2) 主题完整块 [data-bs-theme][data-accent] —— 在「明暗 + 主色」组合下， 额外覆盖背景/卡片/文字/边框/阴影，使整套配色同色系协调 主题完整块特异性 (0,2,0) 高于 light.css/dark.css (0,1,0)，必定覆盖。 ============================================ */ /* ---------- 1. 主色基础块（任意明暗通用） ---------- */ [data-accent="blue"] { --bs-primary: #3b82f6; --bs-primary-rgb: 59, 130, 246; --bs-link-color: #3b82f6; --bs-link-hover-color:#2563eb; --app-accent: #3b82f6; --app-accent-soft: rgba(59, 130, 246, .12); } [data-accent="indigo"] { --bs-primary: #6366f1; --bs-primary-rgb: 99, 102, 241; --bs-link-color: #6366f1; --bs-link-hover-color:#4f46e5; --app-accent: #6366f1; --app-accent-soft: rgba(99, 102, 241, .16); } [data-accent="cyan"] { --bs-primary: #06b6d4; --bs-primary-rgb: 6, 182, 212; --bs-link-color: #06b6d4; --bs-link-hover-color:#0891b2; --app-accent: #06b6d4; --app-accent-soft: rgba(6, 182, 212, .12); } [data-accent="green"] { --bs-primary: #10b981; --bs-primary-rgb: 16, 185, 129; --bs-link-color: #10b981; --bs-link-hover-color:#059669; --app-accent: #10b981; --app-accent-soft: rgba(16, 185, 129, .12); } [data-accent="purple"] { --bs-primary: #8b5cf6; --bs-primary-rgb: 139, 92, 246; --bs-link-color: #8b5cf6; --bs-link-hover-color:#7c3aed; --app-accent: #8b5cf6; --app-accent-soft: rgba(139, 92, 246, .16); } [data-accent="orange"] { --bs-primary: #f59e0b; --bs-primary-rgb: 245, 158, 11; --bs-link-color: #f59e0b; --bs-link-hover-color:#d97706; --app-accent: #f59e0b; --app-accent-soft: rgba(245, 158, 11, .12); } [data-accent="rose"] { --bs-primary: #f43f5e; --bs-primary-rgb: 244, 63, 94; --bs-link-color: #f43f5e; --bs-link-hover-color:#e11d48; --app-accent: #f43f5e; --app-accent-soft: rgba(244, 63, 94, .12); } [data-accent="teal"] { --bs-primary: #14b8a6; --bs-primary-rgb: 20, 184, 166; --bs-link-color: #14b8a6; --bs-link-hover-color:#0d9488; --app-accent: #14b8a6; --app-accent-soft: rgba(20, 184, 166, .16); } /* ---------- 2. 主题完整块（明暗 + 主色，整套同色系配色） ---------- */ /* 浅色 · 蓝 */ [data-bs-theme="light"][data-accent="blue"] { --app-bg: #f2f6fc; --app-surface: #ffffff; --app-surface-alt: #eaf1fb; --app-text: #16223a; --app-text-muted: #56647f; --app-border: #dbe6f4; --app-shadow: 0 1px 2px rgba(30, 58, 110, .05), 0 4px 12px rgba(30, 58, 110, .07); --app-shadow-lg: 0 8px 24px rgba(30, 58, 110, .10); --bs-body-bg: #f2f6fc; --bs-body-bg-rgb: 242, 246, 252; --bs-body-color: #16223a; --bs-body-color-rgb: 22, 34, 58; --bs-emphasis-color: #0a1120; --bs-heading-color: #16223a; --bs-secondary-color:#56647f; --bs-secondary-bg: #eaf1fb; --bs-tertiary-color: #8593a8; --bs-tertiary-bg: #f2f6fc; --bs-border-color: #dbe6f4; } /* 深色 · 靛蓝 */ [data-bs-theme="dark"][data-accent="indigo"] { --app-bg: #0f1018; --app-surface: #171927; --app-surface-alt: #1f2233; --app-text: #e7e9f5; --app-text-muted: #9aa0bd; --app-border: #2a2e46; --app-shadow: 0 1px 2px rgba(0, 0, 0, .30), 0 4px 16px rgba(0, 0, 0, .40); --app-shadow-lg: 0 8px 28px rgba(0, 0, 0, .55); --bs-body-bg: #0f1018; --bs-body-bg-rgb: 15, 16, 24; --bs-body-color: #e7e9f5; --bs-body-color-rgb: 231, 233, 245; --bs-emphasis-color: #ffffff; --bs-heading-color: #f1f2f9; --bs-secondary-color:#9aa0bd; --bs-secondary-bg: #1f2233; --bs-tertiary-color: #6f74a0; --bs-tertiary-bg: #171927; --bs-border-color: #2a2e46; } /* 青蓝 · 青 */ [data-bs-theme="light"][data-accent="cyan"] { --app-bg: #ecf8fb; --app-surface: #ffffff; --app-surface-alt: #e1f3f8; --app-text: #0c2730; --app-text-muted: #4a6c75; --app-border: #cfe7ee; --app-shadow: 0 1px 2px rgba(8, 90, 110, .05), 0 4px 12px rgba(8, 90, 110, .07); --app-shadow-lg: 0 8px 24px rgba(8, 90, 110, .10); --bs-body-bg: #ecf8fb; --bs-body-bg-rgb: 236, 248, 251; --bs-body-color: #0c2730; --bs-body-color-rgb: 12, 39, 48; --bs-emphasis-color: #04141a; --bs-heading-color: #0c2730; --bs-secondary-color:#4a6c75; --bs-secondary-bg: #e1f3f8; --bs-tertiary-color: #7fa3ab; --bs-tertiary-bg: #ecf8fb; --bs-border-color: #cfe7ee; } /* 黛绿 · 绿 */ [data-bs-theme="light"][data-accent="green"] { --app-bg: #ecfaf3; --app-surface: #ffffff; --app-surface-alt: #e1f5ea; --app-text: #0d2c1d; --app-text-muted: #46785e; --app-border: #cdecdc; --app-shadow: 0 1px 2px rgba(8, 90, 60, .05), 0 4px 12px rgba(8, 90, 60, .07); --app-shadow-lg: 0 8px 24px rgba(8, 90, 60, .10); --bs-body-bg: #ecfaf3; --bs-body-bg-rgb: 236, 250, 243; --bs-body-color: #0d2c1d; --bs-body-color-rgb: 13, 44, 29; --bs-emphasis-color: #04140c; --bs-heading-color: #0d2c1d; --bs-secondary-color:#46785e; --bs-secondary-bg: #e1f5ea; --bs-tertiary-color: #7ba892; --bs-tertiary-bg: #ecfaf3; --bs-border-color: #cdecdc; } /* 暮紫 · 紫 */ [data-bs-theme="dark"][data-accent="purple"] { --app-bg: #12101c; --app-surface: #1b1728; --app-surface-alt: #241f36; --app-text: #ece9f6; --app-text-muted: #a49bc4; --app-border: #2e2944; --app-shadow: 0 1px 2px rgba(0, 0, 0, .30), 0 4px 16px rgba(0, 0, 0, .40); --app-shadow-lg: 0 8px 28px rgba(0, 0, 0, .55); --bs-body-bg: #12101c; --bs-body-bg-rgb: 18, 16, 28; --bs-body-color: #ece9f6; --bs-body-color-rgb: 236, 233, 246; --bs-emphasis-color: #ffffff; --bs-heading-color: #f3f1f9; --bs-secondary-color:#a49bc4; --bs-secondary-bg: #241f36; --bs-tertiary-color: #6f679a; --bs-tertiary-bg: #1b1728; --bs-border-color: #2e2944; } /* 暖橙 · 橙 */ [data-bs-theme="light"][data-accent="orange"] { --app-bg: #fdf6ea; --app-surface: #ffffff; --app-surface-alt: #fbf0db; --app-text: #2e2410; --app-text-muted: #796542; --app-border: #f3e6cd; --app-shadow: 0 1px 2px rgba(110, 80, 10, .05), 0 4px 12px rgba(110, 80, 10, .07); --app-shadow-lg: 0 8px 24px rgba(110, 80, 10, .10); --bs-body-bg: #fdf6ea; --bs-body-bg-rgb: 253, 246, 234; --bs-body-color: #2e2410; --bs-body-color-rgb: 46, 36, 16; --bs-emphasis-color: #160f04; --bs-heading-color: #2e2410; --bs-secondary-color:#796542; --bs-secondary-bg: #fbf0db; --bs-tertiary-color: #b09a72; --bs-tertiary-bg: #fdf6ea; --bs-border-color: #f3e6cd; } /* 胭脂 · 玫红 */ [data-bs-theme="light"][data-accent="rose"] { --app-bg: #fdf0f3; --app-surface: #ffffff; --app-surface-alt: #fbe6ec; --app-text: #311019; --app-text-muted: #7a5560; --app-border: #f6d8df; --app-shadow: 0 1px 2px rgba(110, 20, 40, .05), 0 4px 12px rgba(110, 20, 40, .07); --app-shadow-lg: 0 8px 24px rgba(110, 20, 40, .10); --bs-body-bg: #fdf0f3; --bs-body-bg-rgb: 253, 240, 243; --bs-body-color: #311019; --bs-body-color-rgb: 49, 16, 25; --bs-emphasis-color: #18070d; --bs-heading-color: #311019; --bs-secondary-color:#7a5560; --bs-secondary-bg: #fbe6ec; --bs-tertiary-color: #b48792; --bs-tertiary-bg: #fdf0f3; --bs-border-color: #f6d8df; } /* 青瓷 · 青瓷 */ [data-bs-theme="dark"][data-accent="teal"] { --app-bg: #0c1516; --app-surface: #152425; --app-surface-alt: #1c2e30; --app-text: #e6f2f1; --app-text-muted: #93a9a7; --app-border: #21393a; --app-shadow: 0 1px 2px rgba(0, 0, 0, .30), 0 4px 16px rgba(0, 0, 0, .40); --app-shadow-lg: 0 8px 28px rgba(0, 0, 0, .55); --bs-body-bg: #0c1516; --bs-body-bg-rgb: 12, 21, 22; --bs-body-color: #e6f2f1; --bs-body-color-rgb: 230, 242, 241; --bs-emphasis-color: #ffffff; --bs-heading-color: #f0f7f6; --bs-secondary-color:#93a9a7; --bs-secondary-bg: #1c2e30; --bs-tertiary-color: #6f8785; --bs-tertiary-bg: #152425; --bs-border-color: #21393a; }