【JS&CSS】ダークモード（テーマ）切り替えボタンの実装方法

2024年8月5日

本記事では、以下のようにボタンクリックでライトモード（背景：白）とダークモード（背景：黒）を切り替える実装方法を紹介します。

サンプルテキスト

モードの設定がブラウザに保存される（ページを再訪問したとき、前回設定したテーマが適用される）ようになっています。

ライトモード／ダークモードとは

Webページやアプリの外観を変更する設定。それぞれ以下のような特徴とメリット・デメリットがある。

ライトモード: 多くのデバイスやアプリでのデフォルト設定。白など明るい背景に対して、黒などの濃い色の文字やアイコンが表示される。日中や明るい環境での視認性は高いが、長時間見続けると目が疲れやすい。
ダークモード: 背景が黒や濃いグレーで、文字やアイコンが白や明るい色で表示される。目の疲れを軽減でき、デバイスのバッテリー消費を抑えられることも。（特にOLEDスクリーンの場合）

今回はOS側でダークモードにした際のWebサイトの設定方法と、ユーザーが任意でダークモードを選択できる方法をご紹介します。

HTML / CSS / JavaScript コード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ダークモード切替</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
 <button id="mode-toggle">ダークモードに切り替え</button>
 <div id="container">
   <p>サンプルテキスト</p>
   <p>サンプルテキスト</p>
   <p>サンプルテキスト</p>
 </div>
 <script src="script.js"></script>
</body>
</html>

:root {
  --bg-color: white;
  --text-color: black;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

body.dark-mode {
  --bg-color: black;
  --text-color: white;
}

#mode-toggle {
  margin: 20px;
  padding: 10px 20px;
  cursor: pointer;
}

#container {
  margin: 20px;
}

document.addEventListener('DOMContentLoaded', () => {
  const toggleButton = document.getElementById('mode-toggle');
  const currentMode = localStorage.getItem('Mode');

  // テーマの適用とボタンのテキスト設定を行う関数
  const applyMode = (mode) => {
    if (mode === 'dark-mode') {
      document.body.classList.add('dark-mode');
      toggleButton.textContent = 'ライトモードに切り替え';
    } else {
      document.body.classList.remove('dark-mode');
      toggleButton.textContent = 'ダークモードに切り替え';
    }
  };

  // ページロード時に保存されたテーマを適用
  if (currentMode) {
    applyTheme(currentMode);
  }

  // ボタンのクリックイベントリスナー
  toggleButton.addEventListener('click', () => {
    const newMode = document.body.classList.toggle('dark-mode') ? 'dark-mode' : 'light';
    applyMode(newMode);
    localStorage.setItem('mode', newMode);
  });
});

実装のポイント

CSSカスタムプロパティ（変数）を使用して、モードのスタイリングを行う

本実装ではCSS内で変数を定義し、複数のプロパティで利用できるようにしています。

:root {
  --bg-color: white;
  --text-color: black;
}

:root疑似クラスを使って、ルート要素（<html>要素）に変数を設定します。
これにより、ドキュメント全体で変数が使用できるようになります。
--bg-colorと--text-colorがカスタムプロパティ（変数）の名前で、whiteとblackがその値です。

設定したCSS変数を使用するには、以下のようにvar()関数を使います。

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

var(--bg-color)は--bg-color変数の値（white）が適用され、背景が白に。
var(--text-color)は--text-color変数の値（black）が適用され、テキストが黒に。

続いてダークモードの場合は、.dark-modeクラスを使って変数を上書きします。

body.dark-mode {
  --bg-color: black;
  --text-color: white;
}

<body>要素にdark-modeクラスが追加されると、--bg-colorと--text-colorの値が上書きされます。
これにより、ダークモードの場合は背景が黒、テキストが白になります。

applyMode関数を作成し、モードの適用およびボタンテキストの変更を行う

const applyMode = (mode) => {
  if (mode === 'dark-mode') {
    document.body.classList.add('dark-mode');
    toggleButton.textContent = 'ライトモードに切り替え';
  } else {
    document.body.classList.remove('dark-mode');
    toggleButton.textContent = 'ダークモードに切り替え';
  }
};

現在のテーマがダークモード（dark-mode）の場合、以下処理を行う

body要素にdark-modeクラスを付与
ボタンテキストを「ライトモードに切り替え」に変更

現在のテーマがそれ以外（ライトモード）の場合、以下処理を行う

body要素からdark-modeクラスを削除
ボタンテキストを「ダークモードに切り替え」に変更

ローカルストレージを使用し、モードを保存およびロード時にモードを適用する

ローカルストレージ（Local Storage）を使用することで、モードの設定をブラウザに保存し、ページを再訪問したときに保存したテーマが自動で適用されるようになります。

ローカルストレージについてはこちら

【JS API】初心者ガイド：Local Storage 「Local Storage」とは、ブラウザ内にデータを半永久的に保存できるJavaScript APIです。データはキーとバリューのペアで保存され、ブラウザを閉じても保持されます。容…

const currentMode = localStorage.getItem('Mode');

保存されたモード情報を取得し、currentModeに代入。

localStorage.setItem('mode', newMode);

ボタンクリック時、モードを変更すると同時に新しく適用されたモード（newMode）をローカルストレージに保存。（Key: ‘mode’ / Value: newMode）

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！