Context API を使用した React でのダーク モード切り替えの構築

ダーク モードは、最新の Web アプリでは必須の機能です。ユーザーエクスペリエンスを向上させ、目の疲れを軽減します。この投稿では、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 を使用することで、プロップドリルなしでアプリ全体からダークモード状態に簡単にアクセスできるようになりました。 localStorage を追加すると、ページをリロードまたは再訪問した後でもテーマ設定が維持されます。

必要に応じてコンポーネントやスタイルを追加して、この基本的な実装を自由に調整してください。

私の作品をもっと見たい場合は、私のポートフォリオ vrushikvisavadiya をチェックしてください

以上がContext API を使用した React でのダーク モード切り替えの構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。