W3 Watch Reference

prefers-color-scheme メディア特性（Media Features）は、ユーザーが要求しているカラーテーマが「ライトモード（明るい色）」、「ダークモード（暗い色）」のどちらなのかを検出するために使用します。

@media 規則で使用することで、ユーザーが選択したカラーテーマに応じたスタイルを適用することができます。

指定可能な値

下記の値が使用可能です。

no-preference

ユーザーがシステムにカラーテーマの設定を要求していない場合を示します。このキーワード値は、論理コンテキストにおいて false と評価されます。

light

ユーザーが「ライドモード」を要求している場合を示します。ライトモードは通常、明るい背景に、暗い色のテキストという色の組み合わせを好むカラーテーマとなります。

dark

ユーザーが「ダークモード」を要求している場合を示します。ダークモードは通常、暗い背景に、明るい色のテキストという色の組み合わせを好むカラーテーマとなります。

/* 以下の例ではダークモード時に背景色と文字色を反転させています */

body {
  background: white;
  color: black;
}

@media (prefers-color-scheme: dark) {
  body {
    background: black;
    color: white;
  }
}