使用 Context API 在 React 中构建深色模式切换

深色模式是现代网络应用程序的必备功能。它增强了用户体验并可以减轻眼睛疲劳。在这篇文章中，我们将介绍如何使用 Context API 在 React 应用程序中实现深色模式切换来全局管理状态。

我们将创建一个简单的应用程序，用户可以在深色模式和浅色模式之间切换，并将他们的偏好存储在 localStorage 中，因此即使在他们离开或重新加载页面后它仍然存在。

第 1 步：设置上下文

第一步是创建一个 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 元素。

---

第2步：创建切换组件

在这里，我们使用 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;

---

第 3 步：应用深色模式样式

要查看深色模式的实际效果，您需要添加一些 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;
}

---

第 4 步：设置应用程序组件

在这里，我们将整个应用程序包装在 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中文网其他相关文章！