このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
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 2022年1月.
color-scheme はCSS のプロパティで、要素がどのような配色で快適に表示されるかを示すことができます。ユーザーエージェントは、使用されている配色に合わせて、 UI クロームの次の側面を変更します。
- キャンバス表面の色。
- スクロールバーやその他の操作 UI の既定の色。
- フォームコントロールの既定の色。
- その他のブラウザーで指定された UI の既定の色（たとえば、「スペルチェック」のアンダーラインなど）。
要素の作成者は、prefers-color-scheme メディア特性を使用して、残りの要素の色構成に対応する必要があります。
オペレーティングシステムの配色の一般的な選択肢は、「ライト」と「ダーク」、または「昼モード」と「夜モード」です。ユーザーがこれらの配色のいずれかを選択すると、 OS はユーザーインターフェイスを調整します。これには、フォームコントロール、スクロールバー、およびCSS システムカラーの使用値が含まれます。
試してみましょう
color-scheme: normal;color-scheme: dark;color-scheme: light;<section> <textarea>Text Area</textarea></section>#example-element { width: 80%; height: 50%;}構文
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 |
|---|---|
| 適用対象 | すべての要素とテキスト |
| 継承 | あり |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |
形式文法
color-scheme =
normal|
[light|dark|<custom-ident>]+&&only?
例
配色設定の宣言
ページ全体をユーザーの配色設定に合わせるには、color-scheme を:root 要素で設定してください。
:root { color-scheme: light dark;}ユーザーの配色環境設定に固有の要素を組み込むには、それらの要素でcolor-scheme を宣言します。
header { color-scheme: only light;}main { color-scheme: light dark;}footer { color-scheme: only dark;}上記の CSS とともに、 HTML の<meta name="color-scheme"><meta> タグを、<head> 内のすべての CSS スタイル情報の前に記載し、ユーザーエージェントに好みの配色を知らせて、ページ読み込み時に画面が不要に点滅するのを防いでください。
配色設定に基づいたスタイル設定
配色の好みに基づいて要素をスタイル設定するには、prefers-color-scheme メディアクエリーを用います。下記の例では、color-scheme プロパティによってページ全体でオペレーティングシステムの明るい配色と暗い配色の両方を使用することを選択し、prefers-color-scheme を使用して個々の要素にそれらの配色で望ましい前景色と背景色を指定しています。
: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> 関数 を使用して、よりコンパクトなコード構造で異なる配色の前景色と背景色を設定することもできます。
: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 |
ブラウザーの互換性
関連情報
prefers-color-schemeメディアクエリーで、配色設定のユーザー設定を検出することができます。light-dark()カラー関数で、ライトとダークの配色設定の両方に色を設定することができます。- その他の色に関するプロパティ:
color,accent-color,background-color,border-color,outline-color,text-decoration-color,text-emphasis-color,text-shadow,caret-color,column-rule-color background-imageprint-color-adjust- 相対色の使用