prefers-color-schemeでダークモード

prefers-color-schemeで自動ダークモード

prefers-color-schemeメディア機能を使用すると、ユーザーがOSまたはブラウザの設定でライトまたはダークのカラーテーマを好むかどうかを検出できます。

クエリ

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0a0b;
    --text: #fafafa;
  }
}

実装パターン

最も保守性の高いアプローチはCSSカスタムプロパティを使用します。

手動トグルとの組み合わせ

多くのサイトでは、メディアクエリと.darkクラスを追加するJavaScriptトグルを組み合わせています。Tailwind CSSはdarkMode: "class"戦略でこれをサポートしています。