ダークモードは、目に優しいデザインやバッテリーの節約に役立ち、スマホで使っている人も結構いると思います。
多くの海外製テーマはダークモード対応しています。対応できない場合はプラグインを使ってもいいです。僕は一応コーダーなので、できるだけ使いたくないですね。
この記事では、WordPressサイトにダークモードの切り替えボタンを簡単に実装するコードを解説します。
最低限バージョン（読まなくてもいい）
まず、最低限必要となるコードを載せます。
ステップ① CSSでダークモード用のスタイルを作成する
ダークモードってなんだろう。普通状態と比べると、色が異なるだけです。
なので、ダークモード時に適用されるスタイルをCSSに追加しましょう。
例えば、背景色とテキスト色を変更する場合、以下のようなコードを追加します。
body.dark-mode {
background-color: #333;
color: #f1f1f1;
}これだけでは足りないです。
実際には多くの要素を変更する必要があります。
文章の最後に使えるテンプレートを添付します。
ステップ② ダークモードボタンを作成する
次に、ダークモードの切り替えボタンをHTMLに追加します。
以下のコードを、ボタンを配置したい場所に貼り付けてください。
ナビゲーションメニューやサイドバーなど、好きなところでいいです。
<button id="dark-mode-toggle">ダークモード</button>ステップ③ JavaScriptで機能を実装する
ダークモードの切り替えボタンが機能するように、以下のJavaScriptコードを追加します。
document.getElementById('dark-mode-toggle').addEventListener('click', function() {
document.body.classList.toggle('dark-mode');
});完成版
テキストだけのボタンはあんまりにも普通すぎるので、僕が提供しているのはFont Awesome 5で表示されるアイコンです。
🌙のアイコンをクリックしてダークモードに切り替えます。
ダークモードのアイコンが🌞に変わります。
もう一度クリックすると元に戻ります。
ヘッダーメニューに入れたら、こんな感じです。
HTMLの部分はボタンを配置したい場所によって変わるので、最後で説明します。
コピペできるCSSとJavaScriptを先に見てみましょう。
ダークモード用CSS
このCSSを使うことで、WordPressサイトにダークモードを簡単に適用できます。
ただし、実際のサイトで使用する際には、適切なクラス名に置き換えてください。
また、他の要素に対してもダークモードのスタイルを適用する場合、以下のように追加の CSS を記述して、さまざまな要素に対応させることができます。
/* body 要素に適用するダークモードの背景色と文字色 */
body.night-mode {
background-color: #1a1a1a;
color: #f1f1f1;
}
/* ダークモード時のリンクテキスト色 */
.night-mode a {
color: #51b7f0;
}
/* ヘッダーおよびフッターのダークモード背景色 */
.night-mode .your-header-class,
.night-mode .your-footer-class {
background-color: #303030;
}
/* 画像のダークモード用フィルター */
.night-mode img {
filter: brightness(0.8) contrast(0.9);
}
/* pre タグおよび code タグのダークモード背景色と文字色 */
.night-mode pre,
.night-mode code {
background-color: #2f2f2f;
color: #f1f1f1;
}
/* 引用ブロックのダークモード用ボーダー色、背景色、および文字色 */
.night-mode blockquote {
border-color: #515151;
background-color: #2f2f2f;
color: #f1f1f1;
}
/* テーブルのダークモード背景色 */
.night-mode table {
background-color: #303030;
}
/* テーブルの th および td 要素のダークモード用ボーダー色と文字色 */
.night-mode table th,
.night-mode table td {
border-color: #515151;
color: #f1f1f1;
}
/* テーブルの偶数行のダークモード背景色 */
.night-mode table tr:nth-child(even) {
background-color: #3a3a3a;
}
/* 入力フィールドのダークモード用背景色、文字色、およびボーダー色 */
.night-mode input[type="text"],
.night-mode input[type="email"],
.night-mode input[type="password"],
.night-mode textarea {
background-color: #303030;
color: #f1f1f1;
border-color: #515151;
}
/* ボタンおよび送信ボタンのダークモード用背景色と文字色 */
.night-mode button,
.night-mode input[type="submit"] {
background-color: #51b7f0;
color: #f1f1f1;
}
/* リスト要素 (ul, ol) のダークモード文字色 */
.night-mode ul,
.night-mode ol {
color: #f1f1f1;
}
/* リスト要素内のリンクテキストのダークモード色 */
.night-mode ul a,
.night-mode ol a {
color: #51b7f0;
}
/* フォーム要素のラベルのダークモード文字色 */
.night-mode label {
color: #f1f1f1;
}
/* フォーム要素のプレースホルダーのダークモード文字色 */
.night-mode input::placeholder,
.night-mode textarea::placeholder {
color: #b3b3b3;
}
/* セレクトボックスのダークモード背景色、文字色、およびボーダー色 */
.night-mode select {
background-color: #303030;
color: #f1f1f1;
border-color: #515151;
}
/* ページネーションのダークモード背景色、文字色、およびボーダー色 */
.night-mode .pagination {
background-color: #303030;
color: #f1f1f1;
border-color: #515151;
}
ダークモード用JavaScript
function toggleNightMode() {
var nightModeIcon = document.getElementById('night-mode-icon');
document.body.classList.toggle('night-mode');
if (document.body.classList.contains('night-mode')) {
nightModeIcon.classList.remove('fa-moon');
nightModeIcon.classList.add('fa-sun');
localStorage.setItem('nightMode', 'enabled');
} else {
nightModeIcon.classList.remove('fa-sun');
nightModeIcon.classList.add('fa-moon');
localStorage.setItem('nightMode', 'disabled');
}
}
document.addEventListener('DOMContentLoaded', function() {
var nightModeToggle = document.querySelector('.night-mode-toggle > a');
if (nightModeToggle) {
nightModeToggle.addEventListener('click', function(e) {
e.preventDefault();
toggleNightMode();
});
var nightModeSetting = localStorage.getItem('nightMode');
if (nightModeSetting === 'enabled') {
toggleNightMode();
}
}
});
CSSとJavaScriptはどこに貼り付ける？
style.cssにCSSコードを追加し、functions.phpにJavaScriptコードを追加します。一番最後で結構です。
切り替えボタン
これは参考できるコードです。
すでにFont Awesome を導入しているテーマは最初の２行を削除してください。
<!-- Font Awesome 5 を読み込む -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha384-KyZXEAg3QhqLMpG8r+Knujsl5/RO2GwzN2Q5nU/5j5m5z5pEsnfTL5JjJ1z5f45j" crossorigin="anonymous">
<!-- ダークモード切り替えボタン -->
<div class="night-mode-toggle">
<a href="#" title="ダークモードを切り替える">
<i id="night-mode-icon" class="fas fa-moon"></i>
</a>
</div>まとめ
このサイトのために書いたコードですが、結局削除することにしました。なぜかというと、CSSの部分は面倒くさいです。これから多くの文章を書いて、サイトリニューアルをするつもりです。ダークモードのスタイルにこだわる暇はありません。
お役に立てましたら幸いです。ご不明点やご質問がございましたら、お気軽にコメント欄よりお問い合わせください。
コメント