在React或Next.js项目中实现深色和浅色主题的切换功能其实并不复杂。通过一些简单的步骤，就可以让用户在浏览网页时自由选择他们喜欢的显示模式，无论是经典的浅色主题还是更护眼的深色主题。下面我将介绍如何轻松添加这一功能。
确保你已经在项目中使用了React或Next.js。如果你是初学者，建议先了解基本的项目搭建流程。在添加主题切换功能之前，我们需要准备一些基础的样式。通常情况下，我们可以使用CSS变量来定义颜色，这样能够更方便地切换不同的主题。
步：设置CSS变量
在项目的全局样式文件中，定义两个不同的主题。以浅色和深色主题为例：
:root {
--background-color: #ffffff;
--text-color: #000000;
}
[data-theme="dark"] {
--background-color: #000000;
--text-color: #ffffff;
}
这里的:root表示默认的浅色主题，而当页面的data-theme属性为dark时，则启用深色主题。我们通过CSS变量来管理背景颜色和文字颜色，确保可以在不同主题之间切换。
第二步：创建切换逻辑
在React或Next.js组件中实现主题切换逻辑。我们可以使用React的useState和useEffect钩子来完成这一功能：
import { useState, useEffect } from 'react';
function ThemeSwitcher() {
const [theme, setTheme] = useState('light');
useEffect(() => {
document.documentElement.setAttribute('data-theme', theme);
}, [theme]);
const toggleTheme = () => {
setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
};
return (
<button onClick={toggleTheme}>
切换至{theme === 'light' ? '深色' : '浅色'}主题
</button>
);
}
export default ThemeSwitcher;
在这个例子中，useState用于管理当前的主题状态。初始值设置为light，表示默认使用浅色主题。useEffect钩子在每次主题变化时更新HTML的data-theme属性，从而触发对应的CSS样式变化。我们通过一个按钮来实现主题的切换，点击按钮时会调用toggleTheme函数，更新主题状态。
第三步：保持用户偏好
为了提升用户体验，我们可以将用户的主题偏好保存在localStorage中，这样用户每次访问网站时，能够自动应用他们上次选择的主题。
useEffect(() => {
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
setTheme(savedTheme);
}
}, []);
useEffect(() => {
document.documentElement.setAttribute('data-theme', theme);
localStorage.setItem('theme', theme);
}, [theme]);
在这里，组件首次渲染时会从localStorage中读取用户之前选择的主题，并应用到页面上。而每次用户切换主题时，新的主题值也会被保存到localStorage中，以便下次访问时自动加载。
总结
在React或Next.js项目中实现主题切换功能并不复杂。通过CSS变量、useState和useEffect等React基础功能，我们可以轻松实现深色和浅色主题的切换，并保存用户的偏好设置，提供更加个性化的浏览体验。
文章转载自：https://www.96tuji.cn/601.html