CSS prefers-color-schemeパターンとベストプラクティス

prefers-color-schemeのパターン

prefers-color-schemeメディアクエリは、ユーザーのOSレベルのテーマ設定を検出します。CSSカスタムプロパティと組み合わせることで、JavaScriptなしで自動テーマ切り替えが可能になります。

基本パターン

:root {
  --bg: #ffffff;
  --text: #111827;
  --border: #e5e7eb;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111827;
    --text: #f9fafb;
    --border: #374151;
  }
}

body {
  background: var(--bg);
  color: var(--text);
}

画像の処理

ダークテーマでは異なる画像処理が必要な場合があります：

img {
  filter: var(--image-filter, none);
}

@media (prefers-color-scheme: dark) {
  :root {
    --image-filter: brightness(0.9) contrast(1.1);
  }
}

ロゴには、media属性付きの<picture>要素を使用するか、CSS変数をfillカラーに参照するSVGを提供します。

スムーズなテーマトランジション

color-schemeの変更時にトランジションを追加して、急な切り替えを防ぎます：

:root {
  transition: background-color 0.3s ease, color 0.3s ease;
}

注意: ロード時のフラッシュを防ぐため、このトランジションは初回レンダリング後にのみ適用します。多くのフレームワークはハイドレーション中にno-transitionクラスを追加します。

ブラウザサポートとフォールバック

prefers-color-schemeはすべてのモダンブラウザ（Chrome 76+、Firefox 67+、Safari 12.1+）でサポートされています。古いブラウザでは、:rootで定義されたライトテーマが自然なフォールバックとして機能し、追加コードは不要です。

OS設定を変更せずにテスト

Chrome DevToolsのRenderingパネルからprefers-color-schemeをシミュレートできます。これにより、システムの外観を切り替えずに両方のテーマをテストできます。