/* * Semantic 层 —— 语义令牌。组件唯一应该消费的颜色 / 阴影变量。 * * 主题切换 = 改一个 attribute:document.documentElement.dataset.theme = "dark"。 * 自定义主题 = 在 :root[data-theme="custom-x"] 下覆盖同一组变量。 * * 系统主题:未设 data-theme 时,跟随 @media (prefers-color-scheme: dark)。 * * 2026-05 重塑: * - 表面切到中性灰 5 阶(去紫调),accent 仍是 Dracula Purple。 * - 引入 5 色角色:info / success / warn / error / emphasis + 各自 soft 派生。 * - 状态编码统一走角色色(Activity 左色条、Badge tone、Callout 等)。 */ /* ===== Light · 中性灰 + Alucard accent / 角色色(默认) ===== */ :root, :root[data-theme="light"] { --bg: var(--c-bg-light-neutral); --surface: var(--c-surface-light-neutral); --surface-raised: var(--c-raised-light-neutral); --surface-sunken: var(--c-sunken-light-neutral); --surface-elev2: var(--c-elev2-light-neutral); --divider: var(--c-divider-light-neutral); --divider-strong: var(--c-divider-strong-light); --text: var(--c-foreground-alucard); --text-muted: var(--c-text-muted-light-neutral); --accent: var(--c-purple-700); --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent); --accent-softer: color-mix(in srgb, var(--accent) 5%, transparent); --accent-ring: color-mix(in srgb, var(--accent) 26%, transparent); --accent-on: #FFFFFF; /* 5 色角色 —— Alucard 调色板深版,作 status 编码主力 */ --info: var(--c-cyan-deep); /* #036A96 */ --success: var(--c-green-deep); /* #14710A */ --warn: var(--c-yellow-deep); /* #846E15 */ --error: var(--c-red-deep); /* #CB3A2A */ --emphasis: var(--c-pink-deep); /* #A3144D */ --orange: var(--c-orange-deep); /* #A34D14,备用 */ --info-soft: color-mix(in srgb, var(--info) 9%, transparent); --success-soft: color-mix(in srgb, var(--success) 9%, transparent); --warn-soft: color-mix(in srgb, var(--warn) 11%, transparent); --error-soft: color-mix(in srgb, var(--error) 9%, transparent); --emphasis-soft: color-mix(in srgb, var(--emphasis) 9%, transparent); /* state-* 是历史 alias,保留兼容现有组件(StateDot 等) */ --state-online: var(--success); --state-error: var(--error); --state-warn: var(--warn); --shadow-card: 0 1px 2px rgba(17, 17, 20, 0.05), 0 2px 6px rgba(17, 17, 20, 0.07); --shadow-raised: 0 8px 20px rgba(17, 17, 20, 0.10), 0 2px 6px rgba(17, 17, 20, 0.06); --shadow-overlay: 0 12px 32px rgba(17, 17, 20, 0.18); --shadow-accent: 0 8px 22px rgba(100, 74, 201, 0.24); /* 字母头像:浅色主题 白底黑字 */ --avatar-bg: #FFFFFF; --avatar-fg: #1F1F1F; /* 颜色阶 —— Mantine accent 色板用,10 阶手工对齐 Dracula Purple */ --accent-0: #F3F0FF; --accent-1: #E4DEFF; --accent-2: #C9BEFF; --accent-3: #AC9BFE; --accent-4: #9580FF; --accent-5: #8369FB; --accent-6: #7458EE; --accent-7: #644AC9; --accent-8: #523CA8; --accent-9: #3F2D85; color-scheme: light; } /* ===== Dark · 中性灰 + Dracula accent / 角色色 ===== * * 对比度准则: * - 表面用 c-*-dark-neutral 5 阶,色相 260° 但饱和度 8%,接近中性灰。 * 紫色 accent (#AA99FF) 在 #26262E 上对比度 ~8.5:1,胜过原 Dracula 紫底紫前景的 4.2:1。 * - --text-muted 用更冷的中性 #9C9CA9,而非 Comment 紫调,避免在中性灰上仍透紫感。 * - --accent 用 BrightBlue #AA99FF (Dracula PRO Base 官方"亮紫"), * 按钮背景仍可用,accent-on 是 #1B1A23 强反差。 */ :root[data-theme="dark"] { --bg: var(--c-bg-dark-neutral); --surface: var(--c-surface-dark-neutral); --surface-raised: var(--c-raised-dark-neutral); --surface-sunken: var(--c-sunken-dark-neutral); --surface-elev2: var(--c-elev2-dark-neutral); --divider: var(--c-divider-dark-neutral); --divider-strong: var(--c-divider-strong-dark); --text: var(--c-foreground-dracula); --text-muted: var(--c-text-muted-dark-neutral); --accent: var(--c-purple-400); --accent-soft: color-mix(in srgb, var(--accent) 20%, transparent); --accent-softer: color-mix(in srgb, var(--accent) 10%, transparent); --accent-ring: color-mix(in srgb, var(--accent) 36%, transparent); --accent-on: #1B1A23; /* 5 色角色 —— Dracula Pro neon,中性背景下饱和度足够 */ --info: var(--c-cyan); /* #80FFEA */ --success: var(--c-green); /* #8AFF80 */ --warn: var(--c-yellow); /* #FFFF80 */ --error: var(--c-red); /* #FF9580 */ --emphasis: var(--c-pink); /* #FF80BF */ --orange: var(--c-orange); /* #FFCA80 */ --info-soft: color-mix(in srgb, var(--info) 14%, transparent); --success-soft: color-mix(in srgb, var(--success) 14%, transparent); --warn-soft: color-mix(in srgb, var(--warn) 14%, transparent); --error-soft: color-mix(in srgb, var(--error) 14%, transparent); --emphasis-soft: color-mix(in srgb, var(--emphasis) 14%, transparent); --state-online: var(--success); --state-error: var(--error); --state-warn: var(--warn); --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-raised: 0 12px 28px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4); --shadow-overlay: 0 16px 40px rgba(0, 0, 0, 0.65); --shadow-accent: 0 10px 28px rgba(170, 153, 255, 0.34); --avatar-bg: #000000; --avatar-fg: #FFFFFF; color-scheme: dark; } /* ===== System:未指定 data-theme 时跟随系统 ===== */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg: var(--c-bg-dark-neutral); --surface: var(--c-surface-dark-neutral); --surface-raised: var(--c-raised-dark-neutral); --surface-sunken: var(--c-sunken-dark-neutral); --surface-elev2: var(--c-elev2-dark-neutral); --divider: var(--c-divider-dark-neutral); --divider-strong: var(--c-divider-strong-dark); --text: var(--c-foreground-dracula); --text-muted: var(--c-text-muted-dark-neutral); --accent: var(--c-purple-400); --accent-soft: color-mix(in srgb, var(--accent) 20%, transparent); --accent-softer: color-mix(in srgb, var(--accent) 10%, transparent); --accent-ring: color-mix(in srgb, var(--accent) 36%, transparent); --accent-on: #1B1A23; --info: var(--c-cyan); --success: var(--c-green); --warn: var(--c-yellow); --error: var(--c-red); --emphasis: var(--c-pink); --orange: var(--c-orange); --info-soft: color-mix(in srgb, var(--info) 14%, transparent); --success-soft: color-mix(in srgb, var(--success) 14%, transparent); --warn-soft: color-mix(in srgb, var(--warn) 14%, transparent); --error-soft: color-mix(in srgb, var(--error) 14%, transparent); --emphasis-soft: color-mix(in srgb, var(--emphasis) 14%, transparent); --state-online: var(--success); --state-error: var(--error); --state-warn: var(--warn); --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-raised: 0 12px 28px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4); --shadow-overlay: 0 16px 40px rgba(0, 0, 0, 0.65); --shadow-accent: 0 10px 28px rgba(170, 153, 255, 0.34); --avatar-bg: #000000; --avatar-fg: #FFFFFF; color-scheme: dark; } }