【React】ダークモード対応のReactアプリを作る方法：useContextを使ったテーマ切り替え機能の実装

npx create-react-app dark-mode-app
cd dark-mode-app

import React, { createContext, useState } from 'react';

export const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

body {
  margin: 0;
  font-family: Arial, sans-serif;
  transition: background-color 0.3s, color 0.3s;
}

.light {
  background-color: #ffffff;
  color: #000000;
}

.dark {
  background-color: #121212;
  color: #ffffff;
}

button {
  padding: 10px 20px;
  margin: 20px;
  font-size: 16px;
  cursor: pointer;
  border: none;
  border-radius: 5px;
}

button.light {
  background-color: #000000;
  color: #ffffff;
}

button.dark {
  background-color: #ffffff;
  color: #000000;
}

import React, { useContext } from 'react';
import { ThemeProvider, ThemeContext } from './ThemeContext';
import './App.css';

const App = () => {
  return (
    <ThemeProvider>
      <ThemedApp />
    </ThemeProvider>
  );
};

const ThemedApp = () => {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <div className={`App ${theme}`}>
      <h1>React ダークモードアプリ</h1>
      <p>ボタンをクリックしてテーマを切り替えましょう。</p>
      <button className={theme} onClick={toggleTheme}>
        {theme === 'light' ? 'ダークモードに切り替え' : 'ライトモードに切り替え'}
      </button>
    </div>
  );
};

export default App;

useEffect(() => {
  const savedTheme = localStorage.getItem('theme');
  if (savedTheme) {
    setTheme(savedTheme);
  }
}, []);

const toggleTheme = () => {
  const newTheme = theme === 'light' ? 'dark' : 'light';
  setTheme(newTheme);
  localStorage.setItem('theme', newTheme);
};