やらねば.com

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 が適用されません。
自作のテーマなら簡単ですが、借りて来たテーマでは適用箇所を抽出するのは中々面倒です。

取り敢えず上記の CSS コードを適用して、反映されていない箇所を右クリックの開発者ツールで調査して、color や background が適用されている ID やクラスを抜き出して@media(prefers-color-scheme:dark){…}でくくればダークモードのテーマが作れます。
ただ、ダークモードに対応するサイトが増えないと、黒いサイトに違和感を感じる人もいると思うのですが、これはブラウザで対応して欲しいですね。

又、必ずしもダークモードに設定している人がWebサイトもダークモードで見たいかと言うとそうとも限らないので、まずはこのページのみ対応してみました。
OS でダークモードを適用してこのページを開くとダークモードテーマが適用されているかと思います。