属性名 | 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; } }