【CSS】ダークモード切替【JS】

  • 投稿日
  • 著者 くまだ
  • カテゴリー Web制作

どうも、くまだです。

ダークモード切替処理のメモ。

ダークモード切替

コードは以下になります。

<body>
    <div class="container">
        <button class="dark-mode-toggle" id="darkModeToggle" aria-label="ダークモード切り替え">
            <span class="toggle-icon">🌙</span>
        </button>
        <div class="content">
            <h1>ダークモード切り替え</h1>
            <p>ボタンをクリックしてダークモードとライトモードを切り替え。</p>
        </div>
    </div>
</body>
/* ライトモード（デフォルト）のカラー変数 */
:root {
  color-scheme: light;
  --bg-color: #ffffff;
  --text-color: #333333;
  --container-bg: #f5f5f5;
  --button-bg: #ffffff;
  --button-border: #333333;
  --button-hover-bg: #f0f0f0;
}

/* ダークモードのカラー変数 */
[data-theme="dark"] {
  color-scheme: dark;
  --bg-color: #1a1a1a;
  --text-color: #e0e0e0;
  --container-bg: #2d2d2d;
  --button-bg: #2d2d2d;
  --button-border: #e0e0e0;
  --button-hover-bg: #3d3d3d;
}

/* 基本スタイル */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  margin: 0;
  padding: 20px;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px;
  background-color: var(--container-bg);
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  position: relative;
}

/* ダークモード切り替えボタン */
.dark-mode-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid var(--button-border);
  background-color: var(--button-bg);
  color: var(--text-color);
  cursor: pointer;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.dark-mode-toggle:hover {
  background-color: var(--button-hover-bg);
  transform: scale(1.1);
}

.dark-mode-toggle:active {
  transform: scale(0.95);
}

.toggle-icon {
  transition: transform 0.3s ease;
}

[data-theme="dark"] .toggle-icon {
  transform: rotate(180deg);
}

/* コンテンツスタイル */
.content {
  margin-top: 20px;
}

.content h1 {
  margin: 0 0 20px 0;
  font-size: 2rem;
  font-weight: 700;
}

.content p {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.6;
}


document.addEventListener("DOMContentLoaded", () => {
  const darkModeToggle = document.getElementById("darkModeToggle");
  const html = document.documentElement;

  // ローカルストレージからテーマを読み込む
  const savedTheme = localStorage.getItem("theme") || "light";
  html.setAttribute("data-theme", savedTheme);

  // ボタンのアイコンを更新
  if (darkModeToggle) {
    if (savedTheme === "dark") {
      darkModeToggle.querySelector(".toggle-icon").textContent = "☀️";
    }

    // ボタンクリック時の処理
    darkModeToggle.addEventListener("click", () => {
      const currentTheme = html.getAttribute("data-theme");
      const newTheme = currentTheme === "dark" ? "light" : "dark";

      html.setAttribute("data-theme", newTheme);
      localStorage.setItem("theme", newTheme);

      // アイコンを更新
      const icon = darkModeToggle.querySelector(".toggle-icon");
      icon.textContent = newTheme === "dark" ? "☀️" : "🌙";
    });
  }
});

See the Pen ダークモード切替 by kuma0605 (@kuma0605) on CodePen.

ボタンをクリックするとダークモードに切替することができます。

ライトモード、ダークモードのそれぞれの文字色や背景色は以下の部分で変数で設定。

/* ライトモード（デフォルト）のカラー変数 */
:root {
  color-scheme: light;
  --bg-color: #ffffff;
  --text-color: #333333;
  --container-bg: #f5f5f5;
  --button-bg: #ffffff;
  --button-border: #333333;
  --button-hover-bg: #f0f0f0;
}

/* ダークモードのカラー変数 */
[data-theme="dark"] {
  color-scheme: dark;
  --bg-color: #1a1a1a;
  --text-color: #e0e0e0;
  --container-bg: #2d2d2d;
  --button-bg: #2d2d2d;
  --button-border: #e0e0e0;
  --button-hover-bg: #3d3d3d;
}

JSでは、以下の部分でボタンとhtml要素を取得。

  const darkModeToggle = document.getElementById("darkModeToggle");
  const html = document.documentElement;

ローカルストレージ（localStrage）はブラウザにデータ保存し、初期値として”light”を使用します。<html data-theme=”light”>のようにセットされます。

  const savedTheme = localStorage.getItem("theme") || "light";
  html.setAttribute("data-theme", savedTheme);

ダークモードとライトモードでアイコンを切り替えます。

    if (savedTheme === "dark") {
      darkModeToggle.querySelector(".toggle-icon").textContent = "☀️";
    }

ボタンをクリックしたら、テーマを切り替えます。

data-theme=”light”がdata-theme=”dark”になります。”dark”だったらボタンをクリックしたら”light”に切り替わります。

    darkModeToggle.addEventListener("click", () => {
      const currentTheme = html.getAttribute("data-theme");
      const newTheme = currentTheme === "dark" ? "light" : "dark";

      html.setAttribute("data-theme", newTheme);
      localStorage.setItem("theme", newTheme);

      // アイコンを更新
      const icon = darkModeToggle.querySelector(".toggle-icon");
      icon.textContent = newTheme === "dark" ? "☀️" : "🌙";
    });

CSS JavaScript

この記事を書いた人

くまだ

記事一覧