ワードプレスにダークモードを実装する手順のメモ。

まず初めに、ダークモードはご存知でしょうか。ダークモードとは黒を基調にした配色にディスプレイを置き換える機能のことをいいます。

設定方法

mac:システム環境設定一般外観モード

iPhone:設定画面表示と明るさ外観モード

ダークモードにするメリット
  • 消費電力を抑えられる(有機ELディスプレイの場合)
  • 目への負担が少ない(特に暗い場所)
  • アングラ感があってかっこいい(個人の感想です)

最近のスマホでもダークモードへの切り替え機能が標準装備になりつつありますね。すでに、TwitterやInstagram、YouTubeなどはダークモードに対応しているので、ネットサーフィンをしているとありがたみを感じます。

しかし、企業サイトや個人ブログでダークモードを採用しているところは非常に少ないです。もし見つけたら、あなたはラッキー。とはいえ、ユーザビリティを高めておいて損はないですし、間違いなくこれからダークモードを搭載したサイトが増えてくると思います。

今回の記事では、当サイトが実装した(サイトを移行してからは手をつけていません)手順とワンタッチで切り替えられるボタンの設置方法を解説します。始めに言っておくと、今まで独自にCSSをカスタムしたり多くの装飾を利用している方はかなり大変な作業かと思います。

なので、余裕があるときに作業することをおすすめします。作業自体は非常にシンプルですが、クラス名を探したりするのが大変です。

ダークモードの実装方法。

ダークモードを実装する方法は色々ありますが、シンプルなものを選びました。下記が今回、候補に挙がった方法です。

ダークモードを実装する方法
  1. メディアクエリを使う[@media (prefers-color-scheme: dark)
  2. プラグインを使う
  3. Darkmode.jsを使う
  4. JavaScriptを使う

今回は①と④を使用します。②と③はお手軽にダークモードを実装できるのが魅力ですが、よほどシンプルなサイトでない限り微調整が大変なのであまりおすすめはしません。

①のメディアクエリはOSの設定に準拠したモードが採用されます。コード自体もシンプルで簡単です。ただ、IEなど、まだ対応していないブラウザもあるので注意が必要です。そこまで気にしなくてもいいとは思いますが一応下記を参照に。

④のJavaScriptは切り替えボタンを実装するのに利用します。メディアクエリだけでは切り替えることはできません。もし、そういったボタンが必要ないのであれば無視して構いません

メディアクエリを利用した方法。

@media (prefers-color-scheme: dark) {
body {
 background-color: #000;
 color: #dddddd;
}
.postContents p,ul,ol {
 color: #dddddd;
}
}

上記の@media (prefers-color-scheme: dark) {}の中にダークモードで適応させたいスタイルを書いていきます。本当はもっと長いコードです。あくまでダークモードなのでダークカラーをbackground-colorにして、それ以外の色もグレー系を使えば統一感が出ます。最初に使う色を4、5色ほど書き出しておくと作業がスムーズに進みます。

ダークモードのカラーリングは下記の記事を参考にしました。

また、CSS変数を使えば効率的に色指定ができます。変数が使われているかいないかはテーマによって異なるので確かめる必要があります。私が使用しているテーマ「SWELL」はCSS変数が使われており楽に実装できます。下記に載せておきます。以前使用していた「the thor」は対応していなくて大変でした。

これでメディアクエリを利用したダークモードの実装方法を終わります。シンプルですが、作業量が多いです。

JavaScriptを使って切り替えボタンを設置。

前述した方法でダークモードに対応することができますが、ユーザーが任意で切り替えることはできません(設定を変更する必要がある)。

この章で説明するのはダークモードとライトモードを切り替えるボタンの設置方法です。できるだけシンプルに、コピペさえすればできる感じを目指します。

まずはCSSを作成。

先ほど書いたダークモード用のCSSとライトモードに適応させたいスタイルの2通りのファイルを子テーマにアップロードします。

@media (prefers-color-scheme: dark) {
  :root {
    --main-text: #ddd;
    --main-bg: #000;
  }
}
body {
  color: var(--main-text);
  background-color: var(--main-bg);
 } 
body {
  color: var(--main-text);
  background-color: var(--main-bg);
 } 

サーバーにアップロードするにはFTPソフトを利用します。私は「Filezilla」というソフトを使っています。

子テーマにアップロードしてください。WordPressであればURL.comwp-contentthemes子テーマ名で探せるはずです。

スタイルシートを読み込ませる。

cssをサーバーにアップロードしたら、それを読み込ませるためのコードを書いていきます。下記をコピーして子テーマにあるheader.php内の</head>タグの直前に貼り付けてください。

もし、子テーマにheader.phpがなければ前述したFTPソフトでアップロードする必要があります。
※親テーマに貼ると後で面倒なことになるので注意。

<link rel="stylesheet" href="#" type="text/css" id="darkmode">	
<link rel="stylesheet" href="#" type="text/css" id="lightmode">

次はfooter.phpに下記のコードをコピペしてください。これも子テーマを選択する必要があります。

<script>
var changeStyle = function(url) {
var linkstyle = document.getElementById('darkmode');
linkstyle.href = url;
};
</script>

<script>
var changeStyle = function(url) {
var linkstyle = document.getElementById('lightmode');
linkstyle.href = url;
};
</script>

これでスタイルシートを読み込むための準備ができました。あとはHTMLをサイトに埋め込み、CSSで装飾をしていきます。

切り替えボタンのデザイン。

HTMLを埋め込む。

HTMLは下記をコピーして、ウィジェットなどにテキスト(ビジュアルではなく)として貼り付けます。

<div class="darkmode_button">
<a onclick="changeStyle('https://url.com/wp-content/themes/child-theme/darkmode.css');"class="dark_button"><i class="fas fa-moon black-light"></i></a>
<a onclick="changeStyle('https://url.com/wp-content/themes/child-theme/lightmode.css');"class="white_button"><i class="fas fa-sun white-light"></i></a>
</div>

URLの部分と子テーマの部分はそれぞれ自分のサイトの名称に変更してください。

また、<i>タグの中にあるfas fa-moonfas fa-sunFont Awesomeから読み込んでいるものです。それぞれ好きなアイコンを選んでください。
※使い始めはCDNを読み込ませるための準備が必要です。

CSSでボタンを装飾する。

div.darkmode_button{
 margin: 1em auto;
 text-align: center;
}
a.dark_button {
 display: inline-block;
 width: 20%;
 border-radius: 3px;
 background: #1c1c1e;
 padding: 10px;
 margin: 2px;
 text-align: center;
 cursor: pointer;
 border: 1px solid #fff;
}
.white-light{
 color: #1c1c1e;
}
a.dark_button:hover {
 border-radius: 3px;
 background: #fff;
 color: #1c1c1e;
}
a.white_button {
 display: inline-block;
 width: 20%;
 margin: 2px;
 border: 1px solid #000;
 border-radius: 3px;
 background: #fff;
 color: #1c1c1e;
 padding: 10px;
 text-align: center;
 cursor: pointer;
}
.black-light{
 color: #fff;
}
a.white_button:hover {
 border-radius: 3px;
 background: #fff;
 color: #fff;
}

上記のコードを追加CSSまたはstyle-user.cssにコピペしてください。モノクロのシンプルなデザインなので、お使いのテーマカラーに合わせて:hoverの部分を変えたり@keyframesするのもいいと思います。

以上で切り替えボタンを使ったダークモードの実装方法を終わります。OSに左右されない、初めはライトモードから画面を表示したいという方はメディアクエリは使わずにこちらの方法のみでOKです。


最後に、切り替えボタンを使った方法だと別のページを開いた際に設定がリセットされてしまいます。それを防ぐためにはCookieの設定をする必要があります。

しかし、最近なにかとCookieのプライバシーが問題になっていますよね(EUのeプライバシー規則など)。たまにある、Cookie利用を求めるポップアップもその対策です。正直なところ、そこまでしてCookieを保存する必要もない(今のところ)と思っているので今回は採用しませんでした。

ウェブサイトによってニーズは異なりますが、ダークモードをユーザビリティ向上の一環として検討してみるのもありだと思います。

閉じる