Tailwind CSSでMedia戦略によるダークモード
Tailwind CSSのダークモードでmedia戦略を使用し、JavaScriptなしでユーザーのOSカラースキーム設定に自動的に従います。
General
詳細な説明
ダークモード：Media戦略
media戦略はCSSのprefers-color-schemeメディアクエリを使用して、ユーザーのOS設定に自動的に合わせます。JavaScriptは不要です。
メリット
- JavaScript不要 -- トグルコードやlocalStorageなし
- ページ読み込み時の誤ったテーマのフラッシュなし
- ユーザーがOS設定を変更すると自動更新
- シンプルな実装 --
dark:バリアントをクラスに追加するだけ
デメリット
- ユーザーがアプリ内でOS設定を上書きできない
- 手動トグルボタンが不可能
- 細かい制御が少ない
ユースケース
ダークモードをトグルするユーザーインターフェースなしでダークモードが自動的に動作するようにしたいシンプルなサイト、ブログ、ドキュメントにmedia戦略を使用してください。