プラグインなし！コピペで3分超簡単！ダークモードの実装方法。WordPress

ダークモードをWordPressに実装します。プラグインは必要ありません。

1.JavaScriptの記述

ヘッダーに以下のjsコードを記述してください。

 document.addEventListener('DOMContentLoaded', function() {
            const toggleButtons = document.querySelectorAll('.toggle-mode');

            toggleButtons.forEach(function(button) {
                button.addEventListener('click', function() {
                    const currentMode = localStorage.getItem('data-mode');
                    const newMode = currentMode === 'dark' ? 'light' : 'dark';
                    localStorage.setItem('data-mode', newMode);
                    applySavedMode();
                });
            });
            applySavedMode();
        });
        function applySavedMode() {
            const savedMode = localStorage.getItem('data-mode');
            if (savedMode === 'light') {
                document.documentElement.setAttribute('data-mode', 'light');
            } else if (savedMode === 'dark') {
                document.documentElement.setAttribute('data-mode', 'dark');
            }
        }

2.Cssの記述

Cssファイルに以下コードを記述してください。

/*ダークモード制御*/
html[data-mode="dark"] {
filter: invert(1) hue-rotate(180deg);
}

html[data-mode="dark"] img {
filter: invert(1) hue-rotate(180deg);
}

html[data-mode="dark"] iframe {
filter: invert(1) hue-rotate(180deg);
}

/*切替アイコン*/
.toggle-mode{
height: 7px;
padding: 0;
margin: 0;
}

上記切替アイコンのcssはお好みで変更してください。

3.HTMLの記述

切替アイコン（.svg）を表示させたい場所に以下コードを記述してください。アイコンはお好みで。マークアップでないと反転しませんので必ずマークアップを記述してください。

<button class="toggle-mode"><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="25" height="25" viewBox="385 385 30 30"><path d="M400 392.48a7.52 7.52 0 1 0 0 15.04 7.52 7.52 0 0 0 0-15.04z"/><path d="M415 400c-4.58-2.87-5.75-5.48-4.4-10.6-5.12 1.35-7.73.18-10.6-4.4-2.87 4.58-5.48 5.75-10.6 4.4 1.35 5.12.18 7.73-4.4 10.6 4.58 2.87 5.75 5.48 4.4 10.6 5.12-1.35 7.73-.18 10.6 4.4 2.87-4.58 5.48-5.75 10.6-4.4-1.35-5.12-.18-7.73 4.4-10.6zm-15 9.83a9.83 9.83 0 1 1 0-19.66 9.83 9.83 0 0 1 0 19.66z"/></svg></button>

以上、たったこれだけでダークモード実装完了です。