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 | ○ |