使用 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中文網其他相關文章！