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

構文

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

この例では、黒い背景に白いテキストの要素を使用しますが、ユーザーが明色の設定を使用していれば、これらの色を反転します。

HTML

<div class="themed">Theme</div>

CSS

.themed {
  display: block;
  width: 10em;
  height: 10em;
  background: black;
  color: white;
}

@media (prefers-color-scheme: light) {
  .themed {
    background: white;
    color: black;
  }
}

結果

仕様書

仕様書 状態 備考

Media Queries Level 5
prefers-color-scheme の定義

編集者草案 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
prefers-color-scheme media feature
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 67IE 未対応 なしOpera 未対応 なしSafari 完全対応 12.1WebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 未対応 なしFirefox Android 完全対応 67Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mdnwebdocs-bot, mfuji09
最終更新者: mdnwebdocs-bot,