使用 styled-components 实现动态主题切换：1. 安装 styled-components 并定义浅色、深色主题对象；2. 用 ThemeProvider 包裹组件并传递当前主题；3. 在 styled 组件中通过 props.theme 引用主题值；4. 创建按钮触发状态更新以切换主题；5. 可选地通过 localStorage 持久化用户偏好。主题变更时，依赖上下文的组件自动更新，结合 React 状态与本地存储实现流畅、可维护的暗黑/亮色模式切换体验。
实现动态主题切换，使用 CSS-in-JS 是一种灵活且现代的方式。它允许你在 JavaScript 中定义样式，并根据应用状态（如主题）动态改变它们。以下是使用 styled-components 这一主流 CSS-in-JS 方案实现主题切换的核心步骤。
1. 安装并设置 ThemeProvider
styled-components 提供了 ThemeProvider 组件，用于向下传递主题对象。你需要先安装依赖：npm install styled-components
const lightTheme = {
background: '#ffffff',
text: '#000000',
primary: '#007bff'
};
const darkTheme = {
background: '#121212',
text: '#ffffff',
primary: '#1e90ff'
};
在应用根组件中使用 ThemeProvider 包裹子组件：
import { ThemeProvider } from 'styled-components';
function App() {
const [theme, setTheme] = useState(lightTheme);
return (
setTheme(theme === lightTheme ? darkTheme : lightTheme)} />
);
}
2. 使用主题变量定义组件样式
通过 styled 创建组件时，可以直接从props.theme 中读取当前主题值：
import styled from 'styled-components';
const Container = styled.div`
background: ${props => props.theme.background};
color: ${props => props.theme.text};
min-height: 100vh;
padding: 20px;
transition: background 0.3s ease;
`;
const Button = styled.button`
background: ${props => props.theme.primary};
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
`;
这些组件会自动响应 ThemeProvider 中提供的主题变化。
3. 实现主题切换按钮
添加一个按钮来触发主题切换。点击时更新 React 状态，ThemeProvider 会重新渲染并传递新主题：
function Header({ onToggle }) {
return (
我的应用
);
}
由于 styled-components 利用 React 的上下文机制，主题变更后所有使用 theme 的组件都会高效更新。
4. 持久化用户偏好（可选）
为了记住用户选择的主题，可以在切换时保存到 localStorage：
// 初始化时读取保存的主题
const savedTheme = localStorage.getItem('theme') === 'dark' ? darkTheme : lightTheme;
// 切换时保存
const toggleTheme = () => {
const newTheme = theme === lightTheme ? darkTheme : lightTheme;
setTheme(newTheme);
localStorage.setItem('theme', newTheme === darkTheme ? 'dark' : 'light');
};
这样用户下次访问时可以恢复上次选择的主题。
基本上就这些。使用 CSS-in-JS 实现主题切换，关键是结合 ThemeProvider 和组件内对 theme 对象的引用。整个过程自然融入 React 的状态管理机制，代码清晰且易于维护。
