CSS Reference

prefers-color-scheme

ユーザーがライトモード、ダークモードのどちらを要求しているかを検出する

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

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

指定可能な値

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

no-preference

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

light

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

dark

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

詳細説明

ユーザーが要求するカラーテーマ設定はメディアによって異なるかもしれません。

例えば、スマートフォンやPCの画面では（バッテリーの節約などのために）ダークモードを好む場合でも、印刷時は（インクを節約するために）ライトテーマを好む場合があるかもしれません。ユーザエージェントは、このようなメディアによる差異を考慮に入れた上で、prefers-color-scheme がメディアに適した設定を反映するように期待されています。

prefers-color-schemeのサンプルソース

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

body {
  background: white;
  color: black;
}

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

主要ブラウザの対応

IE11 ×
Edge（EdgeHTML） ○
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ○
iOS Safari ○
Android Chrome ○

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome