feat(dark-mode): 实现深色模式支持
- 定义87个CSS变量的深色值（[data-theme=dark]选择器） - 升级ThemeProvider支持light/dark/system三种模式 - 新增ThemeToggle组件（桌面端Header+移动端菜单） - 添加防FOUC内联脚本（渲染前应用主题） - Logo根据主题自动切换（logo.svg/logo-white.svg） - 更新测试用例覆盖主题切换逻辑
This commit is contained in:
张翔
@@ -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;
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user