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)
  • 両方のテーマで画像やイラストをテスト
  • :rootcolor-scheme: dark light;を使用してブラウザにサポートされるスキームを通知

ユースケース

ベーススタイルがダークで、ライトOSテーマを選択したユーザーにライトテーマのオーバーライドを提供する必要があるダークファーストデザインシステムでこのクエリを使用してください。

試してみる — CSS @media Query Builder

フルツールを開く