要素がどのカラースキーム（ライト/ダーク）で表示されるかを示します。ブラウザのフォーム要素などのデフォルトスタイルに影響します。
color-scheme: normal | [ light | dark | <custom-ident> ]+| scheme-light | color-scheme: light |
| scheme-dark | color-scheme: dark |
| scheme-light-dark | color-scheme: light dark |
scheme-* はv4新設。フォーム部品やスクロールバーの配色をOSテーマに追従させる。
color-scheme: light dark;ライト・ダーク両対応
color-scheme: dark;ダークモードのみ
ブラウザのフォーム要素の外観も変わる
color-schemeはフォーム部品・スクロールバー・システム由来のUIをまとめてダーク対応させるプロパティで、light-dark()関数の前提条件でもあります。AIはダークモード実装でこれを飛ばし、スクロールバーだけ白いまま等の中途半端な結果を出しがちです。:root { color-scheme: light dark } が現代のダーク対応の起点です。
ダークモードでスクロールバーとフォーム部品だけ白いままの問題をcolor-schemeで解決して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。