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 の定義
編集者草案 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
prefers-color-scheme media featureChrome 完全対応 76Edge 完全対応 79Firefox 完全対応 67IE 未対応 なしOpera 完全対応 62Safari 完全対応 12.1WebView Android 完全対応 76Chrome Android 完全対応 76Firefox Android 未対応 なしOpera Android 完全対応 54Safari iOS 完全対応 13Samsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応

関連情報