Reactでダークモードとライトモード切替の実装をしてみた

①useState をimportする。

import { useState } from 'react';

②useState を使って、初期状態を設定する。

const [darkMode, setDarkMode] = useState(false);

darkMode 変数に初期値として false を渡す。これによって、アプリケーションの起動時には、ライトモードが有効になる。trueにするとダークモードが有効に。

③ダークモードを切り替える関数を定義。

const toggleDarkMode = () => {
  setDarkMode(!darkMode);
};

setDarkMode 関数を呼び出して、darkMode の真偽値を反転させる。

④ダークモードとライトモードを切り替えるUIの実装。

<div className={`Mode ${darkMode ? "dark" : "light"}`}>
<!-- ここに UI を実装 -->
</div>

darkMode の真偽値に応じて、dark または light のクラス名を付与する。これにより、ダークモードとライトモードを切り替えることができる。

⑤ダークモードとライトモードのCSSを作成

.Mode.dark {
  background-color: #3a383b;
  color: #e1e1e1;
  transition: all 0.5s;
}

.Mode.light {
  background-color: #F8F3EF;
  color: #353535;
  transition: all 0.5s;
}

上記のようにダークモードとライトモードのCSSを作る。

⑥toggleDarkMode 関数を呼び出すようにUIを実装

<a onClick={toggleDarkMode}>
{darkMode ? <i class="fa-solid fa-sun"></i> : <i class="fa-solid fa-moon"></i>}
</a>

aタグをクリックするとダークモードとライトモードが切り替わるようにする。上記のコードではfontawesomeを使用している。

以上から、ダークモードとライトモードを切り替える機能が実装できます。