color-scheme

color-scheme は CSS のプロパティで、要素がどのような配色で快適に表示されるかを示すことができます。

オペレーティングシステムの配色の一般的な選択肢は、「ライト」と「ダーク」、または「中間モード」と「夜モード」です。ユーザーがこれらの配色のいずれかを選択すると、 OS はユーザーインターフェースを調整します。これには、フォームコントロール、スクロールバー、および CSS システムカラーの使用値が含まれます。

構文

color-scheme: normal;
color-scheme: light;
color-scheme: dark;
color-scheme: light dark;

/* グローバル値 */
color-scheme: inherit;
color-scheme: initial;
color-scheme: revert;
color-scheme: unset;

color-scheme プロパティの値は以下のキーワードのうちの一つである必要があります。

値

normal

この要素がどの配色も認識しないため、ブラウザーの既定の配色でレンダリングするべきであることを示します。

light

オペレーティングシステムのライト配色を使用して要素をレンダリングできることを示します。

dark

オペレーティングシステムのダーク配色を使用して要素をレンダリングできることを示します。

公式定義

初期値normal
適用対象すべての要素とテキスト
継承あり
計算値指定通り
アニメーションの種類離散値

形式文法

color-scheme = 
  normal                                       |
  [ light | dark | <custom-ident> ]+ && only?

例

配色への適合

ページ全体をユーザーの配色設定に合わせるには、 color-scheme を :root 要素で設定してください。

:root {
  color-scheme: light dark;
}

仕様書

Specification
CSS Color Adjustment Module Level 1
# color-scheme-prop

ブラウザーの互換性

BCD tables only load in the browser

関連情報