Webサイトをダークモードに対応させてみる

最終更新日:

最近流行りのダークモード。みんな大好きダークモード。目に優しいダークモード。
そんなダークモードを使って自分のサイトを覗いてみると、全然目に優しく無い。これはイカン。どげんかせんとイカン。
ハイコントラストモードや白黒反転機能を使った場合は、何も対応しなくても黒背景に白文字で表示されてくれたのですが、ダークモードを使用した場合はWebサイト側の対応が必要なのですね。

@media(prefers-color-scheme:dark)を適用する

ダークモードに対応するには、@media(prefers-color-scheme:dark)を使って CSS を振り分けるという方法が有るらしい。
これは OS のライトモードとダークモードを検知して CSS を適用するという優れもの。


@media(prefers-color-scheme:dark){
body{
color:#fff;
background-color:#000}
}

と、こんなコードが紹介されている事が多いと思いますが、WordPress を使っていたりすると恐らく上手くいかないのではないでしょうか。
WordPress のテーマで要素やクラスに color や background の指定がしてあると、その部分には CSS が適用されません。
自作のテーマなら簡単ですが、借りて来たテーマでは適用箇所を抽出するのは中々面倒です。

Luxeritas テーマの場合

Luxeritas にはテーマに白ベースと黒ベースのデザインが最初から備わっており、黒ベースのスタイルシートは親テーマフォルダの「styles」→「style-black.css」に有ります。
この中から color や background が適用されている箇所を抜き出して@media(prefers-color-scheme:dark){…}でくくれば Luxeritas の黒ベースのデザインをそのまま適用する事が出来ます。
ただ、ダークモードに対応するサイトが増えないと、黒いサイトに違和感を感じる人もいると思うのですが、これはブラウザで何とかならないのでしょうかね。
又、必ずしもダークモードに設定している人がWebサイトもダークモードで見たいかと言うとそうとも限らないので、まずはこのページのみ適用してみました。