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();
スマホ＆PC対応状況（2025年最新）
| デバイス／ブラウザ | 対応状況 |
|---|---|
| iOS Safari | ✅ 完全対応 |
| Android Chrome | ✅ 完全対応 |
| Windows Edge / Chrome | ✅ 完全対応 |
| macOS Safari / Chrome | ✅ 完全対応 |
ユーザーフレンドリー＆SEOにも有利なダークモード対応
今回紹介したように、HTML・CSS・JavaScriptだけで、OS設定連動＋手動切替が可能なダークモード対応を簡単に実装できます。
ダークモードは単なる見た目だけでなく、ユーザー体験やサイト評価向上に貢献します。ぜひあなたのWebサイトにも導入してみてください。
Googleサーチコンソールに反映されるための最低限のSEO構造とは
