prefers-color-schemeでライトモード
ユーザーがライトカラーテーマを好む場合にライトモードスタイルを適用。ダークファーストデザインシステムでライトオーバーライドが必要な場合に便利。
User Preferences
詳細な説明
prefers-color-scheme: lightでライトモードオーバーライド
デフォルトのスタイルシートがダークモードをターゲットしている場合（ダークファーストデザイン）、prefers-color-scheme: lightを使用して好むユーザーにライトの代替を提供できます。
クエリ
@media (prefers-color-scheme: light) {
:root {
--bg: #ffffff;
--text: #18181b;
}
}
考慮事項
- 両方のモードで十分な色のコントラストを確保（WCAG AAの最低4.5:1）
- 両方のテーマで画像やイラストをテスト
:rootにcolor-scheme: dark light;を使用してブラウザにサポートされるスキームを通知
ユースケース
ベーススタイルがダークで、ライトOSテーマを選択したユーザーにライトテーマのオーバーライドを提供する必要があるダークファーストデザインシステムでこのクエリを使用してください。