深色模式是现代网络应用程序的必备功能。它增强了用户体验并可以减轻眼睛疲劳。在这篇文章中，我们将介绍如何使用 Context API 在 React 应用程序中实现深色模式切换来全局管理状态。
我们将创建一个简单的应用程序，用户可以在深色模式和浅色模式之间切换，并将他们的偏好存储在 localStorage 中，因此即使在他们离开或重新加载页面后它仍然存在。
第一步是创建一个 ThemeContext，它将为应用程序中的任何组件提供暗模式状态和切换功能。
// src/context/ThemeContext.js
import React, { createContext, useState, useEffect } from 'react';
export const ThemeContext = createContext();
export const ThemeProvider = ({ children }) => {
const [darkMode, setDarkMode] = useState(() => {
const savedMode = localStorage.getItem('dark-mode');
return savedMode === 'true' || false;
});
useEffect(() => {
localStorage.setItem('dark-mode', darkMode);
document.body.className = darkMode ? 'dark-mode' : '';
}, [darkMode]);
const toggleDarkMode = () => {
setDarkMode((prevMode) => !prevMode);
};
return (
<ThemeContext.Provider value={{ darkMode, toggleDarkMode }}>
{children}
</ThemeContext.Provider>
);
};
这里，我们使用 useState 来基于 localStorage 初始化主题。 useEffect 确保每当主题更改时，它都会更新 localStorage 并将适当的类应用于 body 元素。
在这里，我们使用 useContext 来使用 ThemeContext 中的 darkModevalue 和toggleDarkMode 函数。
// src/components/ThemeToggle.js
import React, { useContext } from 'react';
import { ThemeContext } from '../context/ThemeContext';
const ThemeToggle = () => {
const { darkMode, toggleDarkMode } = useContext(ThemeContext);
return (
<button onClick={toggleDarkMode}>
{darkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
</button>
);
};
export default ThemeToggle;
要查看深色模式的实际效果，您需要添加一些 CSS 样式。为简单起见，我们将向 body 元素应用深色主题。
/* src/styles.css */
body {
margin: 0;
font-family: sans-serif;
transition: background-color 0.3s ease;
}
body.dark-mode {
background-color: #121212;
color: white;
}
在这里，我们将整个应用程序包装在 ThemeProvider 中，这使得深色模式状态和切换功能全局可用。
// src/App.js
import React from 'react';
import { ThemeProvider } from './context/ThemeContext';
import ThemeToggle from './components/ThemeToggle';
import './styles.css';
function App() {
return (
<ThemeProvider>
<div className="App">
<h1>Dark Mode Toggle with Context API</h1>
<ThemeToggle />
</div>
</ThemeProvider>
);
}
export default App;
通过使用 React 的 Context API，我们可以在应用程序中轻松访问暗模式状态，而无需进行 prop-drilling。添加 localStorage 可确保主题首选项持续存在，即使在页面重新加载或重新访问后也是如此。
您可以根据需要添加更多组件和样式来随意调整这个基本实现。
如果您想看到我的更多作品，请查看我的作品集 vrushikvisavadiya
以上是使用 Context API 在 React 中构建深色模式切换的详细内容。更多信息请关注PHP中文网其他相关文章！
