CSSでダークモードに対応させてみた

2019/10/7 01:49 趣味 ,

流れに乗ってダークモードに対応させてみました。

iOS13が配信されて、ダークモードが一時期話題になりました。賛否両論あるこの機能ですが、iOSをはじめmacやWindows 10、いろんなブラウザもダークモードに対応してます。そこでこのブログも流れに乗ってダークモードに対応させてみました。

そこまで難しくないです

やり方はCSSで@media (prefers-color-scheme: dark) {から}の間にダークモードの時のCSSを記述すればいいのです。例えばこんな感じに

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

まあこの場合だとめっちゃ極端ですが、ダークモードの際にきちんとbody要素の背景が真っ黒になって文字色が真っ白になります。元が同じ色だった場合は変化はありませんが。

でもこのブログのようにたくさんの要素で一気に色が変わる必要がある場合はどうでしょう。特に色が指定してある文字色は一気に反転させたいですね。

一気に変えるときにはCSS変数

実は最近まで知りませんでした。プログラマーに変数といえばだいぶなじみのあるものだとは思うのですが、HTMLとCSSだけとなるとよくわからないかと思いますが、簡単に言えば、数字やらなんやらが入る箱です。今回はカラーコードが入ります。

というわけでCSS変数は:root {から}の間で--から始まる言葉で定義します。以下のようです。

:root {
    --color: #444;
    --background: #e0e1e2;
}

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

実際にこのブログのCSSの一部を少し変化させて掲載しました。このようにして変数を定義しまして、その後先ほどのダークモードにするためのCSSにもう一回同じようなものを書いて変化させます。そしてその変数をどのようにして使うかというと以下のような感じです。

body {
    color: var(--color);
    background-color: var(--background);
}

このようにvar(変数名)と入れることによって、定義した値をブラウザが当てはめてくれます。

なおこのCSS変数(CSSカスタムプロパティが本名)はInternet Explorerでは一切使えません。まあまだまだシェアがあるとはいえ、Microsoft Edgeを推してますしWindows 7の個人向けのサポートはもうすぐ終了しますし、あまり気にしなくてもいいと思います。わざわざWindows アクセサリを探してまでIEを起動する変態はいないと思うので。

そんなこんなでダークモードに対応できたと思います。

補足ですが、ダークモード時に指定するといい色ですが、ほとんどの領域は真っ黒(#000000)を指定した方がいいです。というのはダークモードはもともと有機ELディスプレイを搭載した端末向けの機能ですから目に優しいというのは嘘で機械にやさしくするための機能です。真っ黒にすることによって、有機ELディスプレイはその部分には電気を使いません。その領域が増えることによって大幅に消費電力を抑えることができます。
そして文字色ですがこれは真っ白(#FFFFFF)は控えた方がいいです。このブログもそれに近いですがもうちょっと灰色に近づけると上と同じ理由で消費電力を抑えられます。あとこれは目にやさしいは理由に入ります。真っ白だと少しまぶしく見えてしまいますからね。

一気に変わる部分も抑えておくとブラウザにも優しくなります。まあ途中で変化することなんてあまりないと思いますが。

私はライトモードとダークモード切り替えに対応したサイトが増えることを望みます。白いテーマも好きですから!それではまた。

筆者:花ノひろみん

コメントは受け付けていません。