HTML / CSS / JavaScript ダークモードを実装する方法

HTML、CSS、JavaScriptのみでダークモードを実装する方法も紹介します。ReactやNext.jsを使わずに、シンプルなHTML、CSS、そして少しのJavaScriptでダークモードを切り替える方法を説明します。

See the Pen Dark Mode Toggle by techcode sample (@techcode-sample) on CodePen.

1. HTML構造

まず、基本的なHTML構造を用意します。シンプルなページと、ダークモードを切り替えるボタンを用意します。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dark Mode Toggle</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <button id="theme-toggle">Dark Mode</button>
  <h1>Hello, World!</h1>
  <p>This is a simple dark mode implementation.</p>

  <script src="script.js"></script>
</body>
</html>

2. CSSスタイル

次に、CSSでライトモードとダークモードのスタイルを定義します。

/* styles.css */
:root {
  --background-color: #ffffff;
  --text-color: #000000;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}

.dark-mode {
  --background-color: #000000;
  --text-color: #ffffff;
}

button {
  padding: 10px 20px;
  margin: 20px;
  cursor: pointer;
  border: none;
  background-color: #007BFF;
  color: white;
  font-size: 16px;
}

解説:

:root にCSS変数を定義し、これにより、モードに応じた背景色とテキスト色を管理します。
body 要素では、background-color と color をCSS変数に設定し、スムーズなトランジションを実現します。
.dark-mode クラスを body に追加することで、ダークモードのスタイルが適用されます。

3. JavaScriptのロジック

次に、JavaScriptを使ってダークモードとライトモードを切り替えるロジックを実装します。

// script.js
const toggleButton = document.getElementById('theme-toggle');
const body = document.body;

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

  // ボタンのテキストを切り替える
  if (body.classList.contains('dark-mode')) {
    toggleButton.textContent = 'Light Mode';
  } else {
    toggleButton.textContent = 'Dark Mode';
  }

  // ユーザーの選択をlocalStorageに保存
  localStorage.setItem('theme', body.classList.contains('dark-mode') ? 'dark' : 'light');
});

// ページ読み込み時に、ユーザーのテーマ選択を適用
window.addEventListener('DOMContentLoaded', () => {
  const savedTheme = localStorage.getItem('theme');
  if (savedTheme === 'dark') {
    body.classList.add('dark-mode');
    toggleButton.textContent = 'Light Mode';
  }
});