feat(dark-mode): 实现深色模式支持

- 定义87个CSS变量的深色值（[data-theme=dark]选择器） - 升级ThemeProvider支持light/dark/system三种模式 - 新增ThemeToggle组件（桌面端Header+移动端菜单） - 添加防FOUC内联脚本（渲染前应用主题） - Logo根据主题自动切换（logo.svg/logo-white.svg） - 更新测试用例覆盖主题切换逻辑
2026-05-10 10:00:14 +08:00
parent 37296b5717
commit 27d486d820
6 changed files with 312 additions and 9 deletions
@@ -140,6 +140,99 @@
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
 }

+[data-theme="dark"] {
+  --color-primary: #E5E5E5;
+  --color-primary-hover: #F5F5F5;
+  --color-primary-light: #A3A3A3;
+  --color-primary-lighter: #262626;
+  --color-primary-rgb: 229, 229, 229;
+
+  --color-brand-primary: #E04A68;
+  --color-brand-primary-hover: #F06880;
+  --color-brand-primary-light: #C41E3A;
+  --color-brand-primary-bg: rgba(196, 30, 58, 0.15);
+
+  --color-bg-primary: #0A0A0A;
+  --color-bg-secondary: #0F0F0F;
+  --color-bg-tertiary: #1A1A1A;
+  --color-bg-section: #141414;
+  --color-bg-hover: #262626;
+
+  --color-text-primary: #E5E5E5;
+  --color-text-secondary: #B0B0B0;
+  --color-text-tertiary: #A0A0A0;
+  --color-text-muted: #8C8C8C;
+  --color-text-subtle: #666666;
+  --color-text-placeholder: #737373;
+  --color-text-hint: #5C5C5C;
+
+  --color-border-primary: #2A2A2A;
+  --color-border-secondary: #333333;
+  --color-border-accent: #E5E5E5;
+  --color-border-light: #1F1F1F;
+  --color-border-dark: #CCCCCC;
+
+  --color-link: #E5E5E5;
+  --color-link-hover: #E04A68;
+
+  --color-success: #22C55E;
+  --color-success-hover: #16A34A;
+  --color-success-bg: rgba(22, 163, 74, 0.15);
+  --color-warning: #F59E0B;
+  --color-warning-hover: #D97706;
+  --color-warning-bg: rgba(217, 119, 6, 0.15);
+  --color-info: #8C8C8C;
+  --color-info-bg: #1A1A1A;
+  --color-error: #E04A68;
+  --color-error-bg: rgba(196, 30, 58, 0.15);
+
+  --color-accent-blue: #3B82F6;
+  --color-accent-purple: #8B5CF6;
+  --color-accent-cyan: #06B6D4;
+
+  --color-brand-primary-rgb: 224, 74, 104;
+  --color-warning-rgb: 245, 158, 11;
+  --color-success-rgb: 34, 197, 94;
+  --color-accent-blue-rgb: 59, 130, 246;
+  --color-accent-purple-rgb: 139, 92, 246;
+  --color-accent-cyan-rgb: 6, 182, 212;
+
+  --color-footer-bg: #000000;
+  --color-footer-text: #8C8C8C;
+  --color-footer-text-muted: #525252;
+  --color-footer-text-dim: #737373;
+  --color-footer-text-link: #B0B0B0;
+  --color-footer-border: #262626;
+
+  --color-challenge-isolation: rgba(196, 30, 58, 0.12);
+  --color-challenge-isolation-hover: rgba(196, 30, 58, 0.2);
+  --color-challenge-growth: rgba(217, 119, 6, 0.12);
+  --color-challenge-growth-hover: rgba(217, 119, 6, 0.2);
+  --color-challenge-compliance: rgba(22, 163, 74, 0.12);
+  --color-challenge-compliance-hover: rgba(22, 163, 74, 0.2);
+
+  --color-flip-card-bg: #1A1A1A;
+  --color-flip-card-border: #2A2A2A;
+  --color-flip-card-divider: #525252;
+  --color-flip-card-divider-subtle: #333333;
+
+  --color-toast-success-bg: rgba(22, 163, 74, 0.15);
+  --color-toast-success-border: rgba(34, 197, 94, 0.3);
+  --color-toast-error-bg: rgba(196, 30, 58, 0.15);
+  --color-toast-error-border: rgba(224, 74, 104, 0.3);
+  --color-toast-info-bg: rgba(59, 130, 246, 0.15);
+  --color-toast-info-border: rgba(59, 130, 246, 0.3);
+  --color-toast-close: #666666;
+  --color-toast-close-hover: #A3A3A3;
+
+  --color-skeleton-bg: #262626;
+
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
+  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3);
+  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.3);
+}
+
@layer base {
  * {
    @apply antialiased;