image/svg+xml

OSのダークモードに対応したスタイルを指定できるCSSのメディア特性

最近のmacOSやiOSではダークモードの設定ができるようになりました。
ダークモードは画面の配色を黒ベースにすることで暗い場所などで目を疲れにくくするなどの利点があり、最近注目されている機能です。

今後はWebサイトやアプリケーションなどでもダークモード機能が求められると思うので、CSSでOSのダークモード設定に対応したスタイルを指定できる方法をご紹介します。

CSSのメディア特性

CSSにはメディア特性というものがあります。
これはUAや端末の環境などの特性を指定して、その条件にあった場合のスタイルを指定することができます。

見慣れたものだとレスポンシブWebサイトで使用するメディアクエリーがそれに当たります。

@media (width: 360px) { …… }

上記のwidthというのがビューポート幅を表すメディア特性になります。

ダークモードに対応させるのもこのメディア特性を使用して簡単に実行できます。

ダークモードに対応するメディア特性

OSのダークモードに対応させるためのメディア特性がprefers-color-schemeというものです。
指定できる値としてlightdarkがあり、darkがダークモードに対応した値になっています。

以下のcodepenにサンプルを用意しました。
CSSにはメディア特性prefers-color-scheme: darkを指定してスタイルを記述しています。
皆さんにはどうみえていますでしょうか?

OS側の設定でダークモードを設定している方は背景が黒、文字が白で表示されていると思います。

ちなみにOS側のダークモード設定を変更すると即時にWebサイト側もスタイルが切り替わります。OSの設定画面を開きダークモードの設定を切り替えてみて試してください。

たったこれだけでOSのダークモード設定に対応できました。
簡単ですね。