HTML・CSS・JavaScriptでスマホ＆PC対応のダークモードを自動手動切替実装

HTML・CSS・JavaScriptのみを使って、スマホとPCの両方に対応したダークモードの自動＆手動切り替え機能を実装する方法を詳しく解説します。

ダークモードに対応するメリット

夜間の閲覧がしやすく、目の負担を軽減？
デバイスのバッテリー消費を抑制？（OLEDディスプレイの場合）
ユーザーのOS設定に合わせたUIで満足度向上

方法1：CSSだけで実現する自動ダークモード

ユーザーのOSやブラウザの設定に応じて自動的に切り替えるには、以下のように prefers-color-scheme メディアクエリを使います。

/* 通常（ライトモード） */
body {
  background-color: white;
  color: black;
}

/* ダークモード */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: white;
}

方法2：JavaScriptとlocalStorageを使った手動切り替え

ユーザーがボタンを使って自分でライト／ダークを切り替えたい場合は、以下の3つのファイルを用意します。

1. HTMLコード

<!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="style.css" />
</head>
<body>
  <button id="toggle-theme">テーマ切り替え</button>
  <h1>こんにちは、世界！</h1>
  <p>ライト／ダークテーマを自動＆手動で切り替えできます。</p>
  <script src="script.js"></script>
</body>
</html>

2. CSSコード

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

[data-theme="dark"] {
  --bg-color: #121212;
  --text-color: white;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: sans-serif;
  transition: background-color 0.3s, color 0.3s;
}

button {
  margin: 1rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

3. JavaScriptコード

const toggleButton = document.getElementById('toggle-theme');
const userPrefKey = 'theme';

function applyTheme(theme) {
  document.documentElement.setAttribute('data-theme', theme);
}

function initTheme() {
  const savedTheme = localStorage.getItem(userPrefKey);
  if (savedTheme) {
    applyTheme(savedTheme);
  } else {
    const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    applyTheme(systemPrefersDark ? 'dark' : 'light');
  }
}

toggleButton.addEventListener('click', () => {
  const current = document.documentElement.getAttribute('data-theme');
  const newTheme = current === 'dark' ? 'light' : 'dark';
  applyTheme(newTheme);
  localStorage.setItem(userPrefKey, newTheme);
});

initTheme();