WordPressサイトにダークモードを導入するプラグイン

昨年から少しずつダークモード、或いはナイトモードと呼ばれる黒っぽい画面に切り替えられるサイトが増えてきました。

 

画面を全体的に暗くすることで目にかかる負担と電力消費を若干軽減できるのだそうです。
個人の推測の域を出ませんが、表示スピード勝負が一段落したら、視力障がい者への対応有無が重要になってくるかもなぁと思っています。世の中の空気がそんな感じなので。

 

先日cssだけを取り上げている姉妹サイトの方に簡易ダークモードをつけたのですが、DEMOが以下。

See the Pen
dark mode css
by Takashi Abe (@TakeshiAbe)
on CodePen.

checkboxの切り替えでcssを上書きするシンプルなものです。
これでも良いよという優しい人もいるかも知れませんが、これだと1つ重大な問題がありまして、ページを遷移するとダークモードが解除されます。

 

となるとcookie操作が必要になりますが、すでに「darkmode.js」という有名なものがありますのでそちらに頼りましょう。

 

しかし作者様のgithubによると、darkmode.jsをwordpressに導入するときはプラグインを使うと簡単だよと2つのプラグインが紹介されています。
テスト環境で試してみたので簡単にまとめます。

darkmode.js

プラグインの前にかんたんにdarkmode.jsを説明しておくと、既存の色プロパティを上書きしているわけではなく、cssのmix-blend-modeを利用しています。

 

ざっくり言うと、オリジナルHTMLの上にまるごとレイヤーをかけて、オリジナルの色が反転(?)して表示されるようにしています。
このプロパティは今のところ、IEおよびedgeでは未対応ですので、これらのブラウザでは動作しません。
対応を待ちましょう。

BlackoutとDarkMode for WordPress

紹介されているプラグインは「Blackout: Dark Mode Widget」と「Dark Mode for WordPress」です。プラグイン検索で「darkmode」と入れれば両方出てきます。

darkmodeプラグインのロゴ

 

両方のプラグインで実際にダークモードにしてみますが、その前にオリジナル画面がこちらです。

darkmode適用前のサイト画面

 

ダークモード 上:Blackoout 下:DarkMode for WP

blackoutプラグインでダークモードにしたサイト

 

darkmode for WPでダークモードにしたサイト

 

どちらもdarkmode.jsをベースに作られているのでモード切り替え時の動きなど基本的な見た目は同じです。

しかし、Blakoutの方は画像も全て反転してしまっています。
一方で、Dark Mode for WPの方は、画面下のauthor部分が反転せず真っ暗になってしまっています。

 

どちらもcss追加、またはhtmlで新規クラスをつけてやれば修正可能なはずなのですが、なぜかBlackoutでは上手くいかなかったので私はDarkmode for WPを選択しました。

Dark Mode for WPのcss修正方法

修正が必要になるのは大きく分けると

色を変えたくない」と

(ダークモードにしても変わらないから) 色を変えたい または 違う色にしたい

だと思いますので、順に説明します。

Darkmodeで色をかえたくない場合

先程の画像のように、オリジナルのままで良いのに勝手に色が変わってしまうのを避けたい場合は、html側にclass属性を追加する方法と、cssで調整する方法2つがあります。

 

class="darkmode-ignore" を付与

色を変えたくない要素にclass="darkmode-ignore" をつけてやると、darkmodeでも色が変わりません。

 

isolationプロパティを使う

mix-blend-modeとセットで覚えておくべきisolationプロパティで、
[highlight_css]
(変更したくない要素){
isolation: isolate ;
}[/highlight_css]
と指定してやれば先程同様かわりません。

darkmodeにしたい

プラグインではなく大元のDarkmode.jsでは、positionの値がstatic以外の要素がdarkモードの対象外となってしまうときがあり、先程のテストでauthor部分が変化してなかったのもそのためでした。

そんなときは
[highlight_css]
.darkmode–activated (要素){
mix-blend-mode: difference ;
}[/highlight_css]

とすれば大抵動くのですが、WPではどうにも言うことを聞きません。(OSやブラウザにもよるかも知れません。)

そのときは細かい作業になりますが
[highlight_css]
.darkmode–activated (要素){
/* color やbackgroundを個別に設定する */
} [/highlight_css]
の積み重ねで対処します。

 

もし、対処したい要素がテキストのみであれば裏技的に、
[highlight_css]
.darkmode–activated (要素){
z-index: -1 ;

[/highlight_css]
でいける場合もあります。

 

要は、static以外のposition要素がdarkmodeのレイヤーより上にあるのがモードチェンジしない原因なので、その下に滑り込ませる方法です。もしかするとテーマによって挙動が変わるかも知れません。
画像が含まれている場合にこれをやると、画像も色が変わってしまうのでダメです。

まとめ

すごく良く出来ているプラグインだなと尊敬しますが、それでもプラグインのサポートフォーラムを見ているとエラーが出る場合もあるようです。

 

他に入れているプラグインとの兼ね合いでも変わりますし、案ずるより産むが易しで実際に試されてみるのが一番手っ取り早いと思います。

wordpressblackout, darkmode, darkmode.js

Posted by abetaka