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 プロパティやセレクタを逆引きできます。

IE11
Edge(EdgeHTML)
Edge(Chromium)
Firefox
Chrome
Safari
iOS Safari
Android Chrome

このページの上部へ