ユーザーのシステム設定がライトモードかダークモードかを検出するメディアクエリです。OSのテーマ設定に合わせてサイトの配色を自動で切り替えたい場合に使用します。
@media (prefers-color-scheme: light | dark)バリアント dark: を先頭に付けて使います
| dark:bg-gray-900 | @media (prefers-color-scheme: dark) { background-color: ... } |
v4のdark:は既定でprefers-color-scheme連動。クラス切り替え式（.darkを親に付ける）にするには@custom-variantで上書きする。
@media (prefers-color-scheme: dark) { body { background: black; } }ダークモード時のスタイル
@media (prefers-color-scheme: light) { body { background: white; } }ライトモード時のスタイル
OSやブラウザのテーマ設定を自動検出
prefers-color-schemeが検知するのはOS/ブラウザの設定のみで、サイト内の手動テーマ切替ボタンは別途仕組み（クラス切替+保存）が必要です。AIは「メディアクエリだけでテーマ切替ボタンも実現できる」かのような混同をすることがあります。現在はlight-dark()+color-schemeの上書きで手動切替も簡潔に書けます。
OS設定追従+手動切替（3択: ライト/ダーク/自動）のテーマ機能を、light-dark()を軸に設計して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。