prefers-color-scheme

ユーザーが選択しているモードがライトモード（標準）か、ダークモードかを検知して、それぞれ振り分けてくれるメディア機能です。

CSSではこのように記述します。

@media (prefers-color-scheme: dark) {
  /* このなかにダークモード時のスタイルを記述します */
  body {
    background-color: #000;
  }

  p {
    color: #fff;
  }
}

light-dark プロパティ

2024年からダークモード対応をより簡単にするための新しいCSSプロパティが使用可能になりました。
それがlight-dark() プロパティです。ライトモードとダークモードそれぞれ異なる色を簡単に指定することができます。

CSSではこのように記述します。

.div {
  color: light-dark(#333, #fff);
  background-color: light-dark(#fff, #333);
}

このように、light-dark() プロパティの中にライトモードとダークモードそれぞれの色を指定するだけで、簡単にダークモードに対応することができます。

Can I useで各ブラウザへの対応状況を見てみると、対応率は69.31%と決して高くはないものの、Chrome, Safari, Firefoxなどの主要ブラウザには対応しているため、十分実用可能と言えるでしょう。

微調整

前述した通り、実装方法自体は簡単ですが、実際にすでに公開されているWebサイトを全面的にダークモード対応しようとすると、おそらく結構大変な作業になると思います。

前回の記事でも述べた通り、背景色と文字色を一気に変えることによって、どうしてもデザインのバグが発生してしまいます。

それらを修正していくには、実際にダークモードでの表示を確認して、一個一個修正していく必要があります。

ダークモードの検証方法

ダークモードの表示を確認するには、端末やブラウザの設定を変更すれば、確認できますがいちいちそんなことするのも面倒ですよね。

大丈夫です。Chromeのデベロッパーツールでダークモードの検証ができます。
デベロッパーツールを開いて、右上「︙」をクリックし、「その他のツール」から、「レンダリング」を選択します。

CSSメディア特性 prefers-color-scheme をエミュレートするという項目があるので、prefers-color-scheme: darkを選択すると、ダークモードの表示が確認できます。

ダークモードの表示が確認してみると、なにかしらデザインのバグは発生します。
例えばこのフォームのカテゴリ選択部分、ダークモード対応で文字色を白くしたことによって、白背景に白文字になってしまい、選択肢が見えなくなってしまっています。

この場合に関しては、下記のように別途スタイルを指定することで、ライト/ダークの両モードに対応させます。

select {
    /* 別途スタイルを指定する */
    background-color: #fff;
    color: #000;
}

まとめ

クライアントからダークモードへの対応を依頼されることはまだまだ少ないと思いますが、ユーザーにとってダークモードはだんだん身近な存在になりつつあります。

もしダークモードで閲覧されることを想定していない場合、ユーザーはそのウェブサイトを、こちらが意図せぬ姿で見ている可能性があります。

それは、まだ多くのサイトがレスポンシブ対応できていなかったスマホ黎明期のように、ユーザーとデベロッパーに大きなギャップを生み出している可能性があります。

今こそ、ダークモードへの対応が必要なタイミングなのかもしれません。