color-scheme
color-scheme は meta タグや CSS で要素が対応する配色（light / dark）を宣言し、ブラウザのデフォルト UI をそれに合わせます。
概要
color-scheme は meta タグや CSS で要素が対応する配色（light / dark）を宣言し、ブラウザのデフォルト UI をそれに合わせます。
対応ブラウザ
デスクトップ
Chrome 98+
Edge 98+
Safari 13+
Firefox 96+
モバイル
Chrome Android 98+
Safari iOS 13+
Firefox Android 96+
基本構文
HTML
<meta name="color-scheme" content="light dark">
<style>
:root { color-scheme: light dark; }
</style>実務での使いどころ
-
color-scheme の活用
カラースキーム。ダークモード/ライトモードの対応を宣言。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。