JavaScriptでダークモードを実装｜ボタン1つで切り替え＆保存も対応！

24

Views

最近のWebサイトではよく見かけるダークモード。実はJavaScriptを使えば、簡単に「ライトモード／ダークモードの切り替え」を実装できます。今回は、ボタン1つでテーマを切り替え、設定を保存する基本の作り方を解説します。

実装の流れ

  1. CSSでライト＆ダークのテーマを用意
  2. ボタンを設置し、クリックでテーマを切り替える
  3. ユーザー設定を localStorage に保存して保持

HTMLの基本構造

<button id="toggle-theme">テーマ切替</button>
<main>
  ページの内容がここに入ります。
</main>

CSSでテーマを定義

body {
  background: white;
  color: #222;
  transition: background 0.3s, color 0.3s;
}

body.dark-mode {
  background: #121212;
  color: #f0f0f0;
}

JavaScriptで切り替え処理

ボタンのクリックでクラスを切り替え、設定を保存します。

document.addEventListener("DOMContentLoaded", () => {
  const button = document.getElementById("toggle-theme");
  const body = document.body;

  // ローカルストレージから設定を読み込み
  if (localStorage.getItem("theme") === "dark") {
    body.classList.add("dark-mode");
  }

  button.addEventListener("click", () => {
    body.classList.toggle("dark-mode");

    // 設定を保存
    if (body.classList.contains("dark-mode")) {
      localStorage.setItem("theme", "dark");
    } else {
      localStorage.setItem("theme", "light");
    }
  });
});

ポイント解説

  • classList.toggle()で簡単にテーマ切り替え
  • localStorageでユーザー設定を保持し、次回アクセス時も同じテーマに
  • ページ読み込み時にDOMContentLoadedで設定を反映

おわりに

今回のように、JavaScriptを使えば手軽にダークモードを導入できます。UI改善にもなり、ユーザー満足度向上にもつながるので、ぜひ取り入れてみてください！

次回は「OS設定を自動判定するダークモード対応」について紹介します！

関連記事