当前位置：首页 > news >正文

react19+nextjs+antd切换主题颜色

news 2025/7/17 5:20:43

在 React 19 + Next.js + Ant Design 项目中实现主题切换功能，可以通过以下步骤完成。这里将提供完整方案，包含静态主题切换和动态实时切换两种方式。

一、基础配置（Ant Design 主题支持）

1. 安装必要依赖

npm install antd @ant-design/cssinjs

2. 配置 Next.js 支持 CSS-in-JS

修改 next.config.js：

/** @type {import('next').NextConfig} */
const nextConfig = {experimental: {appDir: true,},transpilePackages: ['antd'],
};module.exports = nextConfig;

3. 创建主题配置文件

src/theme/themeConfig.ts：

import type { ThemeConfig } from 'antd';// 基础主题配置
export const baseTheme: ThemeConfig = {token: {colorPrimary: '#1677ff',borderRadius: 6,},
};// 暗黑主题
export const darkTheme: ThemeConfig = {token: {...baseTheme.token,colorBgBase: '#141414',colorTextBase: '#f0f0f0',colorPrimary: '#177ddc',},algorithm: 'dark',
};// 自定义主题
export const customTheme: ThemeConfig = {token: {...baseTheme.token,colorPrimary: '#ff4d4f',},
};

二、静态主题切换方案（SSR 兼容）

1. 创建 ThemeProvider 组件

src/providers/ThemeProvider.tsx：

'use client';import { ReactNode, useState } from 'react';
import { ConfigProvider, theme } from 'antd';
import { baseTheme, darkTheme, customTheme } from '@/theme/themeConfig';type ThemeType = 'light' | 'dark' | 'custom';export function ThemeProvider({ children }: { children: ReactNode }) {const [currentTheme, setCurrentTheme] = useState<ThemeType>('light');const getThemeConfig = () => {switch (currentTheme) {case 'dark':return darkTheme;case 'custom':return customTheme;default:return baseTheme;}};return (<ConfigProvider theme={getThemeConfig()}>{children}{/* 主题切换控件可以放在这里 */}</ConfigProvider>);
}

2. 在布局文件中使用

src/app/layout.tsx：

import { ThemeProvider } from '@/providers/ThemeProvider';export default function RootLayout({children,
}: {children: React.ReactNode
}) {return (<html lang="en"><body><ThemeProvider>{children}</ThemeProvider></body></html>);
}

三、动态实时切换方案（含持久化）

1. 扩展 ThemeProvider

'use client';import { ReactNode, useEffect, useState } from 'react';
import { ConfigProvider, theme } from 'antd';
import { baseTheme, darkTheme, customTheme } from '@/theme/themeConfig';type ThemeType = 'light' | 'dark' | 'custom';export function ThemeProvider({ children }: { children: ReactNode }) {const [currentTheme, setCurrentTheme] = useState<ThemeType>('light');// 初始化时读取本地存储useEffect(() => {const savedTheme = localStorage.getItem('theme') as ThemeType || 'light';setCurrentTheme(savedTheme);}, []);// 主题变化时保存到本地存储useEffect(() => {localStorage.setItem('theme', currentTheme);document.documentElement.setAttribute('data-theme', currentTheme);}, [currentTheme]);const getThemeConfig = () => {switch (currentTheme) {case 'dark':return darkTheme;case 'custom':return customTheme;default:return baseTheme;}};const toggleTheme = () => {setCurrentTheme(prev => {if (prev === 'light') return 'dark';if (prev === 'dark') return 'custom';return 'light';});};return (<ConfigProvider theme={getThemeConfig()}>{children}<button onClick={toggleTheme}style={{ position: 'fixed', right: 20, bottom: 20 }}>切换主题</button></ConfigProvider>);
}

2. 添加全局 CSS 变量

src/app/globals.css：

:root {--primary-color: #1677ff;
}[data-theme="dark"] {--primary-color: #177ddc;
}[data-theme="custom"] {--primary-color: #ff4d4f;
}

四、高级功能扩展

1. 主题色选择器

import { ColorPicker } from 'antd';function ThemeColorPicker() {const [color, setColor] = useState('#1677ff');return (<ConfigProvidertheme={{token: {colorPrimary: color,},}}><ColorPicker value={color} onChangeComplete={(color) => setColor(color.toHexString())}/></ConfigProvider>);
}

2. 使用 CSS 变量动态主题

// 在 ThemeProvider 中添加
useEffect(() => {document.documentElement.style.setProperty('--primary-color', getThemeConfig().token.colorPrimary);
}, [currentTheme]);

五、解决 Next.js 的 SSR 问题

1. 创建 useClientTheme Hook

src/hooks/useClientTheme.ts：

'use client';import { useEffect, useState } from 'react';export function useClientTheme() {const [theme, setTheme] = useState<'light' | 'dark'>('light');useEffect(() => {// 只在客户端执行const savedTheme = localStorage.getItem('theme') || 'light';setTheme(savedTheme as 'light' | 'dark');}, []);return theme;
}

2. 修改组件使用方式

'use client';import { useClientTheme } from '@/hooks/useClientTheme';export default function ClientComponent() {const theme = useClientTheme();return (<div data-theme={theme}>{/* 内容 */}</div>);
}

六、完整实现流程图

七、最佳实践建议

性能优化：
- 使用 React.memo 避免不必要的重渲染
- 将主题状态提升到最顶层组件

TypeScript 强化：

type ThemeType = 'light' | 'dark' | 'custom';
interface ThemeContextType {theme: ThemeType;setTheme: (theme: ThemeType) => void;
}

服务端渲染兼容：
- 使用 dynamic 导入客户端组件
- 在 _document.tsx 中初始化主题

测试方案：

// 测试主题切换
test('should toggle theme correctly', () => {render(<ThemeProvider />);const button = screen.getByText('切换主题');fireEvent.click(button);expect(localStorage.getItem('theme')).toBe('dark');
});