/* ============================================================ Helpme 全站主题 做法：页面 CSS 里不再直接写颜色，而是引用这里的变量。 每个变量都有四套取值，靠 切换： dark（默认，酷黑） / white（炫白） / sky（天蓝） / pink（粉红） 两点设计说明： 1) 颜色分「十六进制令牌」和「RGB 三元组令牌」两类。 三元组（如 --accent-1-rgb: 99,102,241）用于 rgba(var(--x-rgb), .35) 这种写法 —— 站内有几十种不同透明度的主色光晕，用三元组就能全部跟随主题， 不必给每个透明度单独建变量。 2) 深色主题各变量的取值 == 改造前源码里的原色值， 因此「酷黑」的观感与改造前完全一致。 ============================================================ */ /* ---------------- 酷黑（默认） ---------------- */ :root, html[data-theme="dark"] { color-scheme: dark; /* 文字 */ --text-1: #ffffff; --text-2: #e5e7eb; --text-3: #6b7280; --text-4: #4b5563; --text-primary: #fafafa; --text-secondary: #a1a1aa; --text-muted: #71717a; /* 背景 / 实体面 */ --bg: #000000; --bg-soft: #17171f; --bg-card: #0d0d0f; /* 代码编辑器表面 */ --code-bg: #1a1a2e; --code-gutter: #111118; --code-popup: #17171f; --surface-solid: #f8f8fc; /* 边框 */ --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.14); /* 主色 */ --accent-1: #6366f1; --accent-1-deep: #4338ca; --accent-1-rgb: 99, 102, 241; --accent-2: #a855f7; --accent-2-rgb: 168, 85, 247; /* 语义色 */ --c-warn: #fbbf24; --c-warn-soft: #fde68a; --c-warn-deep: #8a6d1a; --c-warn-rgb: 251, 191, 36; --c-danger: #f87171; --c-danger-soft: #fca5a5; --c-danger-rgb: 248, 113, 113; --c-success: #22c55e; --c-success-soft: #86efac; --c-success-rgb: 34, 197, 94; --c-orange: #f97316; --c-orange-soft: #fed7aa; --c-orange-rgb: 249, 115, 22; --c-purple: #a78bfa; --c-purple-soft: #c4b5fd; --c-pink: #ec4899; --c-pink-soft: #f0abfc; --c-pink-rgb: 236, 72, 153; --c-indigo-soft: #c7d2fe; --c-blue-soft: #93c5fd; --c-blue-rgb: 59, 130, 246; --green: #22c55e; --red: #ef4444; /* 阴影 */ --fg-rgb: 255, 255, 255; /* 半透明「表面」色：导航栏、移动端菜单这类浮在内容之上的底板。 不能用 --shadow-rgb（那个在所有主题下都偏深，是给阴影用的）。 */ --surface-trans-rgb: 0, 0, 0; --shadow-rgb: 0, 0, 0; --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.45); } /* ---------------- 炫白 ---------------- */ html[data-theme="white"] { color-scheme: light; --text-1: #0f172a; --text-2: #334155; --text-3: #64748b; --text-4: #94a3b8; --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #64748b; --bg: #f4f6fb; --bg-soft: #ffffff; --bg-card: #ffffff; /* 代码编辑器表面 */ --code-bg: #f8fafc; --code-gutter: #eef2f7; --code-popup: #ffffff; --surface-solid: #ffffff; --border: rgba(15, 23, 42, 0.10); --border-strong: rgba(15, 23, 42, 0.18); --accent-1: #4f46e5; --accent-1-deep: #4338ca; --accent-1-rgb: 79, 70, 229; --accent-2: #9333ea; --accent-2-rgb: 147, 51, 234; --c-warn: #b45309; --c-warn-soft: #d97706; --c-warn-deep: #92400e; --c-warn-rgb: 180, 83, 9; --c-danger: #dc2626; --c-danger-soft: #ef4444; --c-danger-rgb: 220, 38, 38; --c-success: #15803d; --c-success-soft: #16a34a; --c-success-rgb: 21, 128, 61; --c-orange: #ea580c; --c-orange-soft: #f97316; --c-orange-rgb: 234, 88, 12; --c-purple: #7c3aed; --c-purple-soft: #8b5cf6; --c-pink: #db2777; --c-pink-soft: #ec4899; --c-pink-rgb: 219, 39, 119; --c-indigo-soft: #4338ca; --c-blue-soft: #1d4ed8; --c-blue-rgb: 37, 99, 235; --green: #16a34a; --red: #dc2626; --fg-rgb: 15, 23, 42; /* 半透明「表面」色：导航栏、移动端菜单这类浮在内容之上的底板。 不能用 --shadow-rgb（那个在所有主题下都偏深，是给阴影用的）。 */ --surface-trans-rgb: 255, 255, 255; --shadow-rgb: 15, 23, 42; --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.12); } /* ---------------- 天蓝 ---------------- */ html[data-theme="sky"] { color-scheme: light; --text-1: #082f49; --text-2: #0c4a6e; --text-3: #4a7fa5; --text-4: #7aa7c7; --text-primary: #082f49; --text-secondary: #155e75; --text-muted: #4a7fa5; --bg: #e6f3ff; --bg-soft: #ffffff; --bg-card: #ffffff; /* 代码编辑器表面 */ --code-bg: #f0f9ff; --code-gutter: #e0f2fe; --code-popup: #ffffff; --surface-solid: #ffffff; --border: rgba(8, 47, 73, 0.12); --border-strong: rgba(8, 47, 73, 0.22); --accent-1: #0284c7; --accent-1-deep: #0369a1; --accent-1-rgb: 2, 132, 199; --accent-2: #06b6d4; --accent-2-rgb: 6, 182, 212; --c-warn: #b45309; --c-warn-soft: #d97706; --c-warn-deep: #92400e; --c-warn-rgb: 180, 83, 9; --c-danger: #dc2626; --c-danger-soft: #ef4444; --c-danger-rgb: 220, 38, 38; --c-success: #15803d; --c-success-soft: #16a34a; --c-success-rgb: 21, 128, 61; --c-orange: #ea580c; --c-orange-soft: #f97316; --c-orange-rgb: 234, 88, 12; --c-purple: #7c3aed; --c-purple-soft: #8b5cf6; --c-pink: #db2777; --c-pink-soft: #ec4899; --c-pink-rgb: 219, 39, 119; --c-indigo-soft: #1d4ed8; --c-blue-soft: #0369a1; --c-blue-rgb: 3, 105, 161; --green: #16a34a; --red: #dc2626; --fg-rgb: 8, 47, 73; /* 半透明「表面」色：导航栏、移动端菜单这类浮在内容之上的底板。 不能用 --shadow-rgb（那个在所有主题下都偏深，是给阴影用的）。 */ --surface-trans-rgb: 255, 255, 255; --shadow-rgb: 8, 47, 73; --shadow-card: 0 10px 30px rgba(8, 47, 73, 0.14); } /* ---------------- 粉红 ---------------- */ html[data-theme="pink"] { color-scheme: light; --text-1: #4a0d2c; --text-2: #7a1f4a; --text-3: #a8577f; --text-4: #c78aa8; --text-primary: #4a0d2c; --text-secondary: #831843; --text-muted: #a8577f; --bg: #fff0f6; --bg-soft: #ffffff; --bg-card: #ffffff; /* 代码编辑器表面 */ --code-bg: #fff5fa; --code-gutter: #ffe4ef; --code-popup: #ffffff; --surface-solid: #ffffff; --border: rgba(74, 13, 44, 0.12); --border-strong: rgba(74, 13, 44, 0.22); --accent-1: #db2777; --accent-1-deep: #be185d; --accent-1-rgb: 219, 39, 119; --accent-2: #a855f7; --accent-2-rgb: 168, 85, 247; --c-warn: #b45309; --c-warn-soft: #d97706; --c-warn-deep: #92400e; --c-warn-rgb: 180, 83, 9; --c-danger: #dc2626; --c-danger-soft: #ef4444; --c-danger-rgb: 220, 38, 38; --c-success: #15803d; --c-success-soft: #16a34a; --c-success-rgb: 21, 128, 61; --c-orange: #ea580c; --c-orange-soft: #f97316; --c-orange-rgb: 234, 88, 12; --c-purple: #a21caf; --c-purple-soft: #c026d3; --c-pink: #db2777; --c-pink-soft: #ec4899; --c-pink-rgb: 219, 39, 119; --c-indigo-soft: #6d28d9; --c-blue-soft: #1d4ed8; --c-blue-rgb: 37, 99, 235; --green: #16a34a; --red: #dc2626; --fg-rgb: 74, 13, 44; /* 半透明「表面」色：导航栏、移动端菜单这类浮在内容之上的底板。 */ --surface-trans-rgb: 255, 255, 255; --shadow-rgb: 74, 13, 44; --shadow-card: 0 10px 30px rgba(74, 13, 44, 0.14); }