实现动态主题切换需结合CSS-in-JS与React Hooks，使用styled-components的ThemeProvider注入主题，通过自定义Hook useThemeSwitcher管理主题状态，利用useState和useCallback实现主题切换，创建依赖主题的样式组件，根组件中调用Hook并传递主题，点击按钮触发toggleTheme更新状态，样式自动响应变化，核心是集中管理主题数据并自动订阅更新，可扩展过渡动画与localStorage持久化。
实现动态主题切换的关键在于结合 CSS-in-JS 的灵活性与 React Hooks 的状态管理能力。使用像 styled-components 或 emotion 这类支持主题传递的库，配合自定义 Hook，可以轻松实现主题的实时切换。
使用 styled-components 和 ThemeProvider
styled-components 提供了 ThemeProvider 组件，用于向下层组件注入主题对象。你需要先定义多个主题，比如浅色和深色模式：
const lightTheme = {
background: '#ffffff',
text: '#000000',
primary: '#007bff'
};
const darkTheme = {
background: '#1a1a1a',
text: '#ffffff',
primary: '#00d8ff'
};
然后在应用顶层包裹 ThemeProvider，并将当前主题作为 prop 传入。
创建 useThemeSwitcher 自定义 Hook
封装主题切换逻辑到一个可复用的 Hook 中，便于在不同组件中调用：
立即学习“前端免费学习笔记（深入）”；
import { useState, useCallback } from 'react';
function useThemeSwitcher() {
const [theme, setTheme] = useState(lightTheme);
const toggleTheme = useCallback(() => {
setTheme(prev => prev === lightTheme ? darkTheme : lightTheme);
}, []);
return { theme, toggleTheme };
}
这个 Hook 返回当前主题和切换函数，可在按钮点击等事件中调用 toggleTheme。
在组件中使用动态样式
利用 styled-components 创建依赖主题的 UI 元素：
const AppContainer = styled.div`
background: ${props => props.theme.background};
color: ${props => props.theme.text};
min-height: 100vh;
transition: background 0.3s ease;
`;
const ThemeButton = styled.button`
background: ${props => props.theme.primary};
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
`;
这些样式会自动读取 ThemeProvider 提供的主题值，并随状态更新而重新渲染。
整合到应用入口
在根组件中使用自定义 Hook 并传递主题：
function App() {
const { theme, toggleTheme } = useThemeSwitcher();
return (
<ThemeProvider theme={theme}>
<AppContainer>
<h1>欢迎使用动态主题</h1>
<ThemeButton onClick={toggleTheme}>
切换主题
</ThemeButton>
</AppContainer>
</ThemeProvider>
);
}
每次点击按钮，主题状态更新，所有依赖主题的样式都会自动响应变化。
基本上就这些。通过组合 CSS-in-JS 的主题系统与 React 的状态机制，你可以构建出灵活、可维护的主题切换功能，无需手动操作 class 或全局样式。关键在于把主题数据集中管理，并让 UI 层自动订阅其变化。不复杂但容易忽略的是过渡动画和持久化（如 localStorage），可根据需要进一步扩展。
