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
@@ -0,0 +1,73 @@
+'use client';
+
+import { useTheme } from '@/contexts/theme-context';
+import { Sun, Moon, Monitor } from 'lucide-react';
+import { useCallback, useState, useRef, useEffect } from 'react';
+
+const THEME_OPTIONS = [
+  { value: 'light' as const, label: '浅色', icon: Sun },
+  { value: 'dark' as const, label: '深色', icon: Moon },
+  { value: 'system' as const, label: '跟随系统', icon: Monitor },
+];
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme();
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function handleClick(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClick);
+    return () => document.removeEventListener('mousedown', handleClick);
+  }, []);
+
+  const handleSelect = useCallback(
+    (value: 'light' | 'dark' | 'system') => {
+      setTheme(value);
+      setOpen(false);
+    },
+    [setTheme],
+  );
+
+  const CurrentIcon =
+    THEME_OPTIONS.find((o) => o.value === theme)?.icon ?? Monitor;
+
+  return (
+    <div ref={ref} className="relative">
+      <button
+        onClick={() => setOpen(!open)}
+        className="flex items-center justify-center w-9 h-9 rounded-lg text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-hover)] transition-colors"
+        aria-label="切换主题"
+        aria-expanded={open}
+      >
+        <CurrentIcon className="w-[18px] h-[18px]" strokeWidth={1.8} />
+      </button>
+
+      {open && (
+        <div className="absolute right-0 top-full mt-2 w-36 rounded-lg border border-[var(--color-border-primary)] bg-[var(--color-bg-primary)] shadow-lg py-1 z-50">
+          {THEME_OPTIONS.map((opt) => {
+            const Icon = opt.icon;
+            const isActive = theme === opt.value;
+            return (
+              <button
+                key={opt.value}
+                onClick={() => handleSelect(opt.value)}
+                className={`flex items-center gap-2.5 w-full px-3 py-2 text-sm transition-colors ${isActive
+                    ? 'text-[var(--color-brand-primary)] bg-[var(--color-brand-primary-bg)]'
+                    : 'text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-hover)]'
+                  }`}
+              >
+                <Icon className="w-4 h-4" strokeWidth={1.8} />
+                <span>{opt.label}</span>
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}