From 27d486d820110b94a7a7348daf7c4d91f1496d6b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E7=BF=94?= <xiangzhang1024@gmail.com>
Date: Sun, 10 May 2026 10:00:14 +0800
Subject: [PATCH] =?UTF-8?q?feat(dark-mode):=20=E5=AE=9E=E7=8E=B0=E6=B7=B1?=
 =?UTF-8?q?=E8=89=B2=E6=A8=A1=E5=BC=8F=E6=94=AF=E6=8C=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 定义87个CSS变量的深色值（[data-theme=dark]选择器）
- 升级ThemeProvider支持light/dark/system三种模式
- 新增ThemeToggle组件（桌面端Header+移动端菜单）
- 添加防FOUC内联脚本（渲染前应用主题）
- Logo根据主题自动切换（logo.svg/logo-white.svg）
- 更新测试用例覆盖主题切换逻辑
---
 src/app/globals.css                 | 93 +++++++++++++++++++++++++++++
 src/app/layout.tsx                  |  5 ++
 src/components/layout/header.tsx    | 10 +++-
 src/components/ui/theme-toggle.tsx  | 73 ++++++++++++++++++++++
 src/contexts/theme-context.test.tsx | 50 ++++++++++++++--
 src/contexts/theme-context.tsx      | 90 ++++++++++++++++++++++++++--
 6 files changed, 312 insertions(+), 9 deletions(-)
 create mode 100644 src/components/ui/theme-toggle.tsx

diff --git a/src/app/globals.css b/src/app/globals.css
index 5acc100..d681b99 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -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;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 77df2e8..0b6e391 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -121,6 +121,11 @@ export default function RootLayout({
   return (
     <html lang="zh-CN" className="scroll-smooth" suppressHydrationWarning>
       <head>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `(function(){try{var t=localStorage.getItem('novalon-theme');if(t==='dark'||(t==='system'||!t)&&window.matchMedia('(prefers-color-scheme:dark)').matches){document.documentElement.setAttribute('data-theme','dark')}}catch(e){}})()`,
+          }}
+        />
         <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
         <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
         <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
diff --git a/src/components/layout/header.tsx b/src/components/layout/header.tsx
index 7e85d11..36dac06 100644
--- a/src/components/layout/header.tsx
+++ b/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
diff --git a/src/components/ui/theme-toggle.tsx b/src/components/ui/theme-toggle.tsx
new file mode 100644
index 0000000..620fd36
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/contexts/theme-context.test.tsx b/src/contexts/theme-context.test.tsx
index 668073d..cccddf1 100644
--- a/src/contexts/theme-context.test.tsx
+++ b/src/contexts/theme-context.test.tsx
@@ -1,28 +1,70 @@
-import { renderHook } from '@testing-library/react';
+import { renderHook, act } from '@testing-library/react';
 import { ThemeProvider, useTheme } from './theme-context';
 
 describe('theme-context', () => {
   beforeEach(() => {
     localStorage.clear();
+    document.documentElement.removeAttribute('data-theme');
   });
 
-  it('应该提供默认主题', () => {
+  it('应该提供默认 system 主题', () => {
     const wrapper = ({ children }: { children: React.ReactNode }) => (
       <ThemeProvider>{children}</ThemeProvider>
     );
 
     const { result } = renderHook(() => useTheme(), { wrapper });
 
+    expect(result.current.theme).toBe('system');
+    expect(['light', 'dark']).toContain(result.current.resolvedTheme);
+  });
+
+  it('应该支持切换到深色模式', () => {
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+      <ThemeProvider>{children}</ThemeProvider>
+    );
+
+    const { result } = renderHook(() => useTheme(), { wrapper });
+
+    act(() => {
+      result.current.setTheme('dark');
+    });
+
+    expect(result.current.theme).toBe('dark');
+    expect(result.current.resolvedTheme).toBe('dark');
+    expect(document.documentElement.getAttribute('data-theme')).toBe('dark');
+  });
+
+  it('应该支持切换到浅色模式', () => {
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+      <ThemeProvider>{children}</ThemeProvider>
+    );
+
+    const { result } = renderHook(() => useTheme(), { wrapper });
+
+    act(() => {
+      result.current.setTheme('dark');
+    });
+
+    act(() => {
+      result.current.setTheme('light');
+    });
+
     expect(result.current.theme).toBe('light');
+    expect(result.current.resolvedTheme).toBe('light');
+    expect(document.documentElement.getAttribute('data-theme')).toBeNull();
   });
 
-  it('应该提供resolvedTheme', () => {
+  it('应该持久化主题选择到 localStorage', () => {
     const wrapper = ({ children }: { children: React.ReactNode }) => (
       <ThemeProvider>{children}</ThemeProvider>
     );
 
     const { result } = renderHook(() => useTheme(), { wrapper });
 
-    expect(result.current.resolvedTheme).toBe('light');
+    act(() => {
+      result.current.setTheme('dark');
+    });
+
+    expect(localStorage.getItem('novalon-theme')).toBe('dark');
   });
 });
diff --git a/src/contexts/theme-context.tsx b/src/contexts/theme-context.tsx
index e82b27e..f692800 100644
--- a/src/contexts/theme-context.tsx
+++ b/src/contexts/theme-context.tsx
@@ -1,17 +1,99 @@
 'use client';
 
-import { createContext, useContext, type ReactNode } from 'react';
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+  type ReactNode,
+} from 'react';
+
+type Theme = 'light' | 'dark' | 'system';
 
 interface ThemeContextType {
-  theme: 'light';
-  resolvedTheme: 'light';
+  theme: Theme;
+  resolvedTheme: 'light' | 'dark';
+  setTheme: (theme: Theme) => void;
 }
 
 const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
 
+const STORAGE_KEY = 'novalon-theme';
+
+function getSystemTheme(): 'light' | 'dark' {
+  if (typeof window === 'undefined') {return 'light';}
+  return window.matchMedia('(prefers-color-scheme: dark)').matches
+    ? 'dark'
+    : 'light';
+}
+
+function applyTheme(resolved: 'light' | 'dark') {
+  const root = document.documentElement;
+  if (resolved === 'dark') {
+    root.setAttribute('data-theme', 'dark');
+  } else {
+    root.removeAttribute('data-theme');
+  }
+}
+
+function getInitialTheme(): Theme {
+  if (typeof window === 'undefined') {return 'system';}
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored === 'light' || stored === 'dark' || stored === 'system') {
+      return stored;
+    }
+  } catch { /* localStorage unavailable */ }
+  return 'system';
+}
+
 export function ThemeProvider({ children }: { children: ReactNode }) {
+  const [theme, setThemeState] = useState<Theme>(getInitialTheme);
+  const [resolvedTheme, setResolvedTheme] = useState<'light' | 'dark'>(() => {
+    const initial = getInitialTheme();
+    return initial === 'system' ? getSystemTheme() : initial;
+  });
+  const mounted = useRef(false);
+
+  useEffect(() => {
+    if (mounted.current) {return;}
+    mounted.current = true;
+    const initial = getInitialTheme();
+    const resolved = initial === 'system' ? getSystemTheme() : initial;
+    setResolvedTheme(resolved);
+    applyTheme(resolved);
+  }, []);
+
+  useEffect(() => {
+    if (theme !== 'system') {return;}
+
+    const mql = window.matchMedia('(prefers-color-scheme: dark)');
+    const handler = () => {
+      const resolved = getSystemTheme();
+      setResolvedTheme(resolved);
+      applyTheme(resolved);
+    };
+    mql.addEventListener('change', handler);
+    return () => mql.removeEventListener('change', handler);
+  }, [theme]);
+
+  const setTheme = useCallback(
+    (t: Theme) => {
+      setThemeState(t);
+      const resolved = t === 'system' ? getSystemTheme() : t;
+      setResolvedTheme(resolved);
+      applyTheme(resolved);
+      try {
+        localStorage.setItem(STORAGE_KEY, t);
+      } catch { /* localStorage unavailable */ }
+    },
+    [],
+  );
+
   return (
-    <ThemeContext.Provider value={{ theme: 'light', resolvedTheme: 'light' }}>
+    <ThemeContext.Provider value={{ theme, resolvedTheme, setTheme }}>
       {children}
     </ThemeContext.Provider>
   );