React+Tailwindで実装するダークモード切替

はじめに

今回はReactとTailwind CSSを使って、ダークモードとライトモード（通常画面）のテーマ切替機能を実装してみました。
それについてご紹介します！

画面

ただの切替機能の実装なので、シンプルな画面になっています。

ライトモード

ダークモード

実装

①ボタンの処理

ボタンをクリックすることで、以下のトグル関数を実行し、ライトモード/ダークモードの切り替えをしています。
useStateを用いることで、値が変化したら自動で画面が再描画されます。

// 最初はライトモード。trueでダークモードに切り替わる
const [isDark, setIsDark] = useState(false);

const toggleDarkMode = () => {
    setIsDark(!isDark);
  };

②クラス名の動的切り替え

isDarkのstateによって、適用するcssクラス名を動的に切り替えています。

<div className={`min-h-screen flex items-center justify-center transition-colors duration-300 ${
      isDark ? 'bg-slate-900 text-white' : 'bg-slate-100 text-slate-800'
    }`}>

• isDark が true(ダークモード)：濃い背景(bg-slate-900)と白文字(text-white)
• isDark が false(ライトモード）：明るい背景(bg-slate-100)と濃い文字(text-slate-800)
  を指定しています。

また、transition-colors duration-300を指定することで、色の切り替わりが0.3秒かけて滑らかに変化するようになっています。

全体コード

import React, { useState } from 'react';

function App() {
  // ダークモードの状態（true: オン / false: オフ）
  const [isDark, setIsDark] = useState(false);

  const toggleDarkMode = () => {
    setIsDark(!isDark);
  };

  return (
    <div className={`min-h-screen flex items-center justify-center transition-colors duration-300 ${
      isDark ? 'bg-slate-900 text-white' : 'bg-slate-100 text-slate-800'
    }`}>
      
      {/* カードコンテナ */}
      <div className={`p-8 rounded-2xl shadow-xl max-w-sm w-full text-center transition-colors duration-300 ${
        isDark ? 'bg-slate-800 border border-slate-700' : 'bg-white border border-slate-200'
      }`}>
        
        {/* アイコンとタイトル */}
        <h1 className="text-2xl font-bold mb-4">
          {isDark ? 'ダークモード' : 'ライトモード'}
        </h1>

        {/* ボタン */}
        <button
          onClick={toggleDarkMode}
          className={`px-6 py-2.5 rounded-full font-semibold transition-all duration-200 active:scale-95 shadow-md ${
            isDark
              ? 'bg-amber-400 text-slate-900 hover:bg-amber-300'
              : 'bg-indigo-600 text-white hover:bg-indigo-700'
          }`}
        >
          {isDark ? 'ライトモードに戻す' : 'ダークモードにする'}
        </button>

      </div>
    </div>
  );
}

export default App;

終わりに

Tailwind CSSを用いることで、ひとつのファイルだけに用意されたクラス名を用いるだけで実装することができました。
便利ですね。
また次回の記事でお会いしましょう！