2026年5月20日

WordPressにダークモードを実装する方法

テーマ・デザイン

はじめに

ダークモードはユーザーの目の疲れを軽減し、暗い環境での視認性を向上させます。WordPressでは prefers-color-scheme メディアクエリとJavaScriptの localStorage を組み合わせて、OS設定連動＋手動切り替えの両方に対応できます。

症状・原因

サイトにダークモードを実装したい
OSのダーク設定に自動で追従したい
ユーザーが手動でライト/ダークを切り替えできるようにしたい
ページ読み込み時にダークモードが一瞬白くなる（フラッシュ）を防ぎたい

解決手順

ステップ1：CSS変数でライト/ダークテーマを定義する

/* style.css */
:root {
    --color-bg:     #ffffff;
    --color-text:   #1d2327;
    --color-border: #c3c4c7;
    --color-card:   #f6f7f7;
}

/* OS設定（JavaScript無効でも機能） */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-bg:     #1a1a2e;
        --color-text:   #e8e8e8;
        --color-border: #3a3a5c;
        --color-card:   #2a2a4a;
    }
}

/* 手動でダークモードを指定 */
[data-theme="dark"] {
    --color-bg:     #1a1a2e;
    --color-text:   #e8e8e8;
    --color-border: #3a3a5c;
    --color-card:   #2a2a4a;
}

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

ステップ2：フラッシュ防止（インラインスクリプトをheadの先頭に配置）

// functions.php — フラッシュ防止のインラインスクリプト
add_action('wp_head', function(): void {
    ?>
    <script>
    (function() {
        var saved = localStorage.getItem('darkMode');
        var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
        if (saved === 'dark' || (!saved && prefersDark)) {
            document.documentElement.setAttribute('data-theme', 'dark');
        }
    })();
    </script>
    <?php
}, 1); // 優先度1でCSSより先に実行

ステップ3：JavaScriptで手動切り替えを実装する

// js/dark-mode.js
document.addEventListener('DOMContentLoaded', function() {
    const toggle = document.getElementById('dark-mode-toggle');
    const root   = document.documentElement;

    function setTheme(theme) {
        root.setAttribute('data-theme', theme);
        localStorage.setItem('darkMode', theme);
        if (toggle) {
            toggle.setAttribute('aria-pressed', theme === 'dark' ? 'true' : 'false');
            toggle.textContent = theme === 'dark' ? '☀️ ライト' : '🌙 ダーク';
        }
    }

    // ボタンクリックで切り替え
    if (toggle) {
        toggle.addEventListener('click', function() {
            const current = root.getAttribute('data-theme');
            setTheme(current === 'dark' ? 'light' : 'dark');
        });
    }

    // OS設定変更を検知
    window.matchMedia('(prefers-color-scheme: dark)')
        .addEventListener('change', function(e) {
            if (!localStorage.getItem('darkMode')) {
                setTheme(e.matches ? 'dark' : 'light');
            }
        });
});

ステップ4：切り替えボタンをヘッダーに追加する

// functions.php — ヘッダーにボタンを追加
add_action('wp_footer', function(): void {
    echo '<button id="dark-mode-toggle" aria-pressed="false" aria-label="ダークモード切り替え"
               style="position:fixed;bottom:90px;right:24px;z-index:500;
                      padding:8px 12px;border-radius:20px;border:1px solid var(--color-border);
                      background:var(--color-card);color:var(--color-text);cursor:pointer;">
        🌙 ダーク
    </button>';
});

// functions.php — スクリプトをエンキュー
add_action('wp_enqueue_scripts', function(): void {
    wp_enqueue_script(
        'dark-mode',
        get_template_directory_uri() . '/js/dark-mode.js',
        [],
        filemtime(get_template_directory() . '/js/dark-mode.js'),
        true
    );
});

注意事項

フラッシュ防止のインラインスクリプトは priority: 1 で wp_head の最初に出力することが重要です。CSSが読み込まれる前に data-theme 属性をセットすることでフラッシュを防げます
transition: background-color 0.3s はフラッシュ防止スクリプトのアニメーションとして適用されないよう注意してください。ページ読み込み時には遷移アニメーションを無効化する場合があります
画像にはダークモード用のフィルターを適用できます: [data-theme="dark"] img { filter: brightness(0.85); }

まとめ

ダークモードはCSS変数 + [data-theme="dark"] セレクタで定義し、prefers-color-scheme でOS設定に自動追従します。手動切り替えは localStorage に保存し、フラッシュ防止のインラインスクリプトを wp_head の優先度1で出力します。

Post Views: 14