| 属性名 | color-scheme |
|---|---|
| 値 | normal | [ light | dark ]+ |
| 初期値 | normal |
| 適用可能要素 | すべての要素とテキスト |
| 継承 | 継承する |
| メディア | visual |
| アニメーション | 可能 |
スマートフォンなどのダークモードに対応します。値は複数指定することができます。
| 値 | 説明 |
|---|---|
| normal | ブラウザにまかせます。 |
| light | ライトモードを指定します。 |
| dark | ダークモードを指定します。 |
下記の様に指定しておくと、スマホがダークモードであればダークモードに、非ダークモードであれば非ダークモードで表示されます。
:root {
color-scheme: light dark;
}
Webページをダークモードに対応させるには、下記の様に prefers-color-scheme を使用する方法もあります。
@media (prefers-color-scheme: dark) {
body {
background-color: #000;
color: #fff;
}
}