WordPressでダークモードを実装する方法｜CSSとJavaScriptで対応しよう！

WordPress

の好みに応じたUI切り替えが一般的になっています。
この記事では、WordPressサイトにダークモードを実装する方法を、テーマファイルのカスタマイズとCSS・JavaScriptの組み合わせでわかりやすく解説します。

✅ ダークモードとは？

ダークモードとは、背景を黒や濃いグレー、文字を白系にすることで、目の疲れを軽減し、省電力にもつながる表示モードです。
最近のOSやブラウザでは、ユーザーが「ライトモード or ダークモード」を選択できるようになっています。

WordPressサイトでも、これに合わせて表示を切り替えられるようにしましょう。

✅ 実装の概要

WordPressでダークモードを実現するには、以下のような手順を踏みます：

1. prefers-color-scheme による自動検出対応（CSS）
2. 切り替えボタンの設置（任意）
3. ダーク用スタイルの作成
4. ユーザーの選択を保存（ローカルストレージ）

✅ CSSで自動切り替えに対応する

まずは、ブラウザやOSの設定に応じて自動でダークモードを適用するCSSを書きます。

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

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

これだけで、ユーザーがOSやブラウザでダークモードを選んでいれば、自動でスタイルが切り替わります。

✅ 手動で切り替えるボタンを設置する（オプション）

自分でダークモードをオン／オフしたいユーザー向けに、切り替えボタンを設置する場合は、JavaScriptを使います。

HTML（header.phpなどに設置）

<button id="toggle-dark-mode">🌙 Dark Mode</button>

JavaScript（footerに記述または外部JSファイル化）

const toggle = document.getElementById("toggle-dark-mode");
const html = document.documentElement;

toggle.addEventListener("click", () => {
  html.classList.toggle("dark-mode");

  // 選択を保存
  const isDark = html.classList.contains("dark-mode");
  localStorage.setItem("darkMode", isDark ? "on" : "off");
});

// ページ読み込み時に設定を反映
if (localStorage.getItem("darkMode") === "on") {
  html.classList.add("dark-mode");
}

CSS（ダークスタイル）

.dark-mode body {
  background-color: #121212;
  color: #f0f0f0;
}

✅ WordPressテーマで適用する際の注意点

• 切り替えスイッチを設置するなら、ボタンの位置やスタイルも工夫を
• ローカルストレージで保存することでページ移動後もモードが保持される
• テーマ全体のカラー設計を意識して、主要要素（見出し・ボタン・リンク）の色も対応する

✅ まとめ

方法	特徴
CSSのみ	ユーザーのOS設定に応じて切り替え可能
JS＋CSS	ユーザーが自分でオン／オフ可能

ユーザーの快適な閲覧体験を提供するために、WordPressテーマにもダークモード対応を取り入れてみましょう！

おすすめの記事

• functions.phpの使い方と注意点
• 自作テーマにブロックエディタ対応を追加する方法