prefers-color-scheme

privacy.resistFingerprintingtrue に設定している場合は、 prefers-color-scheme の設定は light に上書きされます。
あるいは、ユーザーは ui.systemUsesDarkTheme という数値設定を作成して既定の動作を上書きし、 light (値: 0)、 dark (値: 1)、 no-preference (値: 2) の何れかの値を返すようにすることもできます。 (それ以外の値を指定すると、Firefox は light を返します。)

prefers-color-schemeCSSメディア特性で、ユーザーがシステムに要求したカラーテーマが明色か暗色かを検出するために使用します。

構文

no-preference
ユーザーが知られている設定をシステムに対して行っていないことを示します。このキーワード値は boolean context では false と評価されます。
light
ユーザーがシステムに、明色のテーマを持つインターフェイスを好むと通知したことを示します。
dark
ユーザーがシステムに、暗色のテーマを持つインターフェイスを好むと通知したことを示します。

以下の要素は初期の色のテーマを持っています。これらの要素は、ユーザーの配色の好みに応じて、さらにテーマを設定することができます。

HTML

<div class="day">Day (initial)</div>
<div class="day light-scheme">Day (changes in light scheme)</div>
<div class="day dark-scheme">Day (changes in dark scheme)</div> <br>

<div class="night">Night (initial)</div>
<div class="night light-scheme">Night (changes in light scheme)</div>
<div class="night dark-scheme">Night (changes in dark scheme)</div>

CSS

.day   { background: #eee; color: black; }
.night { background: #333; color: white; }

@media (prefers-color-scheme: dark) {
  .day.dark-scheme   { background:  #333; color: white; }
  .night.dark-scheme { background: black; color:  #ddd; }
}

@media (prefers-color-scheme: light) {
  .day.light-scheme   { background: white; color:  #555; }
  .night.light-scheme { background:  #eee; color: black; }
}

.day, .night {
  display: inline-block;
  padding: 1em;
  width: 7em;
  height: 2em;
  vertical-align: middle;
}

結果

仕様書

仕様書 状態 備考
Media Queries Level 5
prefers-color-scheme の定義
編集者草案 初回定義

ブラウザーの互換性

BCD tables only load in the browser

関連情報