color-scheme

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since February 2022.

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

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

試してみましょう

構文

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

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

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

値

normal

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

light

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

dark

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

only

ユーザーエージェントが要素の配色を上書きすることを禁じます。

特定の要素または :root に color-scheme: only light; を適用することで、 Chrome の自動ダークテーマによる色上書きを無効にするために使用することができます。

公式定義

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

形式文法

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

例

配色設定の宣言

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

css
:root {
  color-scheme: light dark;
}

ユーザーの配色環境設定に固有の要素を組み込むには、それらの要素で color-scheme を宣言します。

css
header {
  color-scheme: only light;
}
main {
  color-scheme: light dark;
}
footer {
  color-scheme: only dark;
}

配色設定に基づいたスタイル設定

配色の好みに基づいて要素をスタイル設定するには、 prefers-color-scheme メディアクエリーを用います。下記の例では、color-scheme プロパティによってページ全体でオペレーティングシステムの明るい配色と暗い配色の両方を使用することを選択し、 prefers-color-scheme を使用して個々の要素にそれらの配色で望ましい前景色と背景色を指定しています。

css
:root {
  color-scheme: light dark;
}

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

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

また、実験的な light-dark() <color> 関数 を使用して、よりコンパクトなコード構造で異なる配色の前景色と背景色を設定することもできます。

css
:root {
  color-scheme: light dark;
}

.element {
  color: light-dark(black, white);
  background-color: light-dark(white, black);
}

仕様書

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

ブラウザーの互換性

BCD tables only load in the browser

関連情報