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

- 定义87个CSS变量的深色值（[data-theme=dark]选择器）
- 升级ThemeProvider支持light/dark/system三种模式
- 新增ThemeToggle组件（桌面端Header+移动端菜单）
- 添加防FOUC内联脚本（渲染前应用主题）
- Logo根据主题自动切换（logo.svg/logo-white.svg）
- 更新测试用例覆盖主题切换逻辑

src/components/layout/header.tsx

@@ -7,6 +7,8 @@ import { usePathname } from 'next/navigation';
 import { Menu, X } from 'lucide-react';
 import { AnimatePresence, motion } from 'framer-motion';
 import { Button } from '@/components/ui/button';
+import { ThemeToggle } from '@/components/ui/theme-toggle';
+import { useTheme } from '@/contexts/theme-context';
 import { COMPANY_INFO, NAVIGATION_V2, MEGA_DROPDOWN_DATA, type NavigationItemV2 } from '@/lib/constants';
 import { MegaDropdown } from '@/components/layout/mega-dropdown';
 import { useFocusTrap } from '@/hooks/use-focus-trap';
@@ -17,6 +19,7 @@ function HeaderContent() {
   const [openDropdown, setOpenDropdown] = useState<string | null>(null);
   const pathname = usePathname();
   const focusTrapRef = useFocusTrap<HTMLDivElement>(isOpen);
+  const { resolvedTheme } = useTheme();
 
   useEffect(() => {
     const handleScroll = () => {
@@ -90,7 +93,7 @@ function HeaderContent() {
               aria-label="返回首页"
             >
               <Image 
-                src="/logo.svg" 
+                src={resolvedTheme === 'dark' ? '/logo-white.svg' : '/logo.svg'}
                 alt={COMPANY_INFO.name}
                 width={120}
                 height={30}
@@ -146,6 +149,7 @@ function HeaderContent() {
             </nav>
 
             <div className="hidden md:flex items-center gap-3">
+              <ThemeToggle />
               <Button 
                 size="sm"
                 asChild
@@ -222,6 +226,10 @@ function HeaderContent() {
                   </motion.div>
                 ))}
                 <div className="mt-6 px-4 pt-6 border-t border-[var(--color-border-primary)]">
+                  <div className="flex items-center justify-between mb-4">
+                    <span className="text-sm text-[var(--color-text-muted)]">外观模式</span>
+                    <ThemeToggle />
+                  </div>
                   <Button
                     className="w-full"
                     asChild

src/components/ui/theme-toggle.tsx

@@ -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>
+  );
+}