答案：通过定义明暗主题对象，结合React Context管理状态，CSS-in-JS组件动态读取主题变量，实现主题切换与持久化。1. 定义lightTheme和darkTheme颜色变量；2. 使用ThemeContext提供主题状态和toggleTheme方法；3. styled-components或emotion中通过props.theme应用样式；4. UI按钮调用toggleTheme切换主题；5. 利用localStorage保存用户偏好；6. 可选监听prefers-color-scheme实现系统级适配；整体结构清晰，可扩展性强，用户体验良好。
实现一个支持暗黑主题的CSS-in-JS方案，核心在于动态切换主题变量，并确保组件能响应主题变化。以下是一个实用、可扩展的设计思路，适用于主流 CSS-in-JS 库（如 styled-components、emotion 等）。
1. 定义主题对象
创建明暗两套颜色变量，便于统一管理和切换。
const lightTheme = {
background: '#ffffff',
text: '#000000',
primary: '#007bff',
secondary: '#6c757d',
border: '#dee2e6'
};
const darkTheme = {
background: '#121212',
text: '#ffffff',
primary: '#00bcd4',
secondary: '#9e9e9e',
border: '#333333'
};
2. 使用 Context 管理主题状态
通过 React 的 Context API 提供主题数据和切换方法。
import { createContext, useState, useContext } from 'react';
const ThemeContext = createContext();
export const ThemeProvider = ({ children }) => {
const [darkMode, setDarkMode] = useState(false);
const theme = darkMode ? darkTheme : lightTheme;
const toggleTheme = () => setDarkMode(prev => !prev);
return (
{children}
);
};
export const useTheme = () => useContext(ThemeContext);
3. 在 CSS-in-JS 中使用主题
以 styled-components 或 emotion 为例，通过 props.theme 访问当前主题。
立即学习“前端免费学习笔记（深入）”；
import styled from '@emotion/styled';
const Container = styled.div`
background-color: ${props => props.theme.background};
color: ${props => props.theme.text};
border: 1px solid ${props => props.theme.border};
padding: 16px;
transition: background-color 0.3s ease;
`;
const Button = styled.button`
background-color: ${props => props.theme.primary};
color: white;
border: none;
padding: 8px 16px;
cursor: pointer;
`;
4. 添加主题切换控件
在 UI 中提供按钮，调用 toggleTheme 实现切换。
function App() {
const { darkMode, toggleTheme } = useTheme();
return (
欢迎使用暗黑模式
);
}
5. 持久化用户偏好（可选）
利用 localStorage 记住用户选择的主题。
const getInitialTheme = () => {
const saved = localStorage.getItem('darkMode');
return saved ? JSON.parse(saved) : false;
};
// 在 ThemeProvider 中：
const [darkMode, setDarkMode] = useState(getInitialTheme);
useEffect(() => {
localStorage.setItem('darkMode', JSON.stringify(darkMode));
}, [darkMode]);
6. 系统偏好自动适配（可选）
默认跟随系统设置。
const getInitialTheme = () => {
const saved = localStorage.getItem('darkMode');
if (saved !== null) return JSON.parse(saved);
return window.matchMedia('(prefers-color-scheme: dark)').matches;
};
基本上就这些。结构清晰，易于维护，也能良好支持用户体验。 
