prefers-color-scheme(ダークモード対応)

このレッスンでは、prefers-color-schemeを使ったダークモード対応の基本を学び、利用者の設定に応じたデザインを提供できるようになることを目標にします。「CSS ダークモード 対応」で調べている方向けです。

@media (prefers-color-scheme: dark)を使うと、利用者のOS・ブラウザ設定が「ダークモード」のときだけ適用されるスタイルを書けます。自分のサイトをダークモードに対応させる第一歩です。

サンプルコードでは、通常時は白背景・黒文字のスタイルを、@media (prefers-color-scheme: dark)の中では暗い背景・明るい文字のスタイルをそれぞれ指定しています。端末の設定を切り替えることで、自動的に配色が変わる仕組みを体験してみましょう。

初心者がよくつまずくのが、CSS変数と組み合わせずに個別のプロパティを1つずつ上書きしてしまい、コードが長くなってしまうことです。実務ではCSS変数(カスタムプロパティ)と組み合わせて、色の切り替えを一元管理するのが定番のテクニックです。

夜間の閲覧やバッテリー節約のためにダークモードを好むユーザーは年々増えています。このプロ道のサイト自体もこの仕組みを使ってライト/ダークを切り替えており、実際のサイト運営でも役立つ知識です。