最近便利なCSSおれおれAdvent Calendar 2023 – 10 日目

ダークモード対応って近年人気じゃないですか。自分はまああんまり興味ないんですが、なんか好きですよねみんな。

prefers-color-scheme を使うとその端末全体の設定を判定できるので、ダークモード、ライトモードの選択肢に「端末の設定に合わせる」を追加することもできます。

例

1
2
3
4
5
6
7
8
9
10
11
:root {
  /* デフォルトでライトモード（あるいはフォールバック） */
  --theme--background-color: #f0f0f0;
  --theme--color: #333;
   
  /* 端末がダークモードのとき */
  @media (prefers-color-scheme: dark) {
    --theme--background-color: #333;
    --theme--color: #f9f9f9;
  }
}

端末の設定を変えながらデモを試してください。（ここ Ginpen.com は対応してないです。）　iOS も Android も macOS も Windows も設定があります。

取り得る値

light と dark のみ。

なんか auto とか default とかあってもいいのになとか思ったりもするけれど、ないです。

そのうち high-contrast とか mild とか追加されたりするのかな。ないか。

初期値

特に設定がない場合は light となる仕様で、つまりウェブにおいてはライトモードが初期値ということになります。

CSS の実装も、light と dark の両方を書くよりライトモード前提で記述した上でダークモードを上書きするのが良いかなと思います。

その他

メディアクエリーは詳細度ないです。

おしまい

新しい prefers-color-scheme の仕様としてパーティモード party の追加が検討されています（大嘘）。

ついでなんだけど、やっぱりスタイル宣言を入れ子にできるのすげえ便利ね。ｻﾝｷｭｰCSS Nesting Module

参考