Tailwind CSS ダークモード

ダークモードは、目の疲れを軽減し、端末のバッテリーを節約するために暗い色調のインターフェースを提供する、一般的なユーザーインターフェースデザインのトレンドです。

Tailwind CSS はダークモード機能をサポートしており、開発者はユーザーのシステム環境設定に合わせて、Webサイトのダークバージョンを簡単に作成できます。

Tailwind CSS には、darkという修飾子があり、ダークモード向けのスタイルを定義できます。

ユーザーの端末またはOSがダークモードに設定されている場合、dark:修飾子が付いたスタイルは自動的に有効になります。

次の例は、システム環境設定のメディアクエリに基づいてスタイルを設定します：

ライトモードの場合：背景色は白（bg-white）、テキストの色は黒（text-black）。

ダークモードの場合：背景色は黒（dark:bg-black）、テキストの色は白（dark:text-white）。

ダークモードを有効にする

デフォルトでは、Tailwind は media ストラテジーを使用してダークモードを検出します。つまり、ユーザーのシステム環境設定に基づきます。

より細かい制御が必要な場合は、class ストラテジーを使用することもできます。

1、tailwind.config.js でダークモードを有効にする

• mediaモード：ユーザーのOSの設定（メディアクエリprefers-color-scheme: dark）に基づいて自動的に切り替わります。
• classモード：開発者がhtml 或 bodyタグにdarkクラスを追加してダークモードを手動で切り替えることができます。

2つのモードの違い：

切り替えロジックの例（class モード）

オペレーティングシステムの環境設定に依存するのではなく、手動でダークモードを切り替えたい場合は、media ストラテジーの代わりに class ストラテジーを使用してください。

これで、dark:{class} クラスは prefers-color-scheme に基づいて動作しなくなり、代わりに HTML ツリー内に dark クラスが存在するときに動作します：

<!-- 不允许深色模式 -->
<html>
<body>
  <div class="bg-white dark:bg-black">...</div>
</body>
</html>

<!-- 允许深色模式 -->
<html class="dark">
<body>
  <div class="bg-white dark:bg-black">...</div>
</body>
</html>

ダークモードのユーティリティクラスの使い方

1、スタイル切り替え

を使用してdark:プレフィックスでダークモードのスタイルを指定します。

2、レスポンシブとダークモードの組み合わせ

レスポンシブブレークポイントとダークモードは同時に使用できます：

小さい画面ではフォントサイズは xl です。

ダークモードでは、小さい画面のフォントの色がライトグレーに変わります。

3、インタラクション状態とダークモードの組み合わせ

hover や focus などの状態とダークモードを組み合わせてスタイルを適用できます：

ダークモードの拡張

場合によっては、ダークモード向けに追加の色やスタイルを提供する必要があるかもしれません。その場合は、theme.extend を使用して Tailwind 設定をカスタマイズできます。

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          DEFAULT: '#1DA1F2',
          dark: '#0D74B8',
        },
      },
    },
  },
}

HTML で拡張色を使用する：

実例

以下は、ダークモード切り替えを実装する完全な例です：