Tailwind CSS とダークモード

この記事では、Tailwind CSS で ダーク モード を実装する方法を検討します。ダーク モードは、暗い環境でも優れたユーザー エクスペリエンスを提供し、目の疲れを軽減するため、人気のデザイン トレンドになっています。 Tailwind では、組み込みユーティリティを使用してダーク モードを簡単にサポートできます。

---

1. Tailwind でのダークモードの仕組み

Tailwind は、ダーク バリアントを通じてダーク モードを実装するためのシンプルなアプローチを提供します。デフォルトでは、ユーザーのシステム設定のダーク モードをチェックし、対応するスタイルを適用します。

Tailwind でダーク モードを設定する:

tailwind.config.js ファイルで、ダーク モードをメディア (システム環境設定) またはクラス (手動切り替え) に設定して有効にします。

module.exports = {
  darkMode: 'media', // or 'class'
}

• メディア: ユーザーの OS 設定に基づいてダーク モードを有効にします。
• class: ダーク クラスを追加することで、ダーク モードを手動で切り替えることができます。

---

2.ダークモードのスタイリング

ダーク モードを有効にすると、ダーク バリアントを使用してダーク モード専用のスタイルを適用できます。

例:

<div class="bg-white dark:bg-gray-800 text-black dark:text-white p-4">
    This is a dark mode toggle example
</div>

• bg-white と text-black はライト モードに適用されます。
• dark:bg-gray-800 および dark:text-white は、ダーク モードがアクティブな場合に適用されます。

この柔軟性により、ダーク モードとライト モードでコンポーネントのスタイルを変えることができます。

---

3. Tailwind のクラス戦略を使用したダークモード

ユーザーがライト モードとダーク モードを手動で切り替えられるようにしたい場合は、クラス戦略を使用します。これにより、 でダーク クラスを追加または削除することで、ダーク モードを切り替えることができます。または

要素。

JavaScript を使用した例:

  
    <div class="bg-white dark:bg-gray-900 p-4">
      Toggle dark mode manually
    </div>
    <button onclick="document.documentElement.classList.toggle('dark')">
      Toggle Dark Mode
    </button>
  

この設定では、ボタンをクリックするとダーク クラスが切り替わり、ライト モードとダーク モードが切り替わります。

---

4.特定の要素にダーク モードを使用する

Web ページの特定のセクションだけをダーク モードに切り替え、他の部分は変更しないでおきたい場合があります。特定のコンテナ内でダーク モード クラスをラップすることで、要素ごとにダーク モード スタイルを適用できます。

例:

<div class="bg-gray-100 p-4">
    <div class="dark:bg-gray-900 dark:text-white p-4">
        This section is in dark mode, while the outer section remains light.
    </div>
</div>

この方法を使用すると、デザインのどの部分がダーク モードの影響を受けるかをより詳細に制御できます。

---

5.ダークモードカラーの調整

カラー パレットを拡張することで、tailwind.config.js ファイルのダーク モード カラーをカスタマイズすることもできます。

例:

module.exports = {
  theme: {
    extend: {
      colors: {
        darkBackground: '#1a202c',
        darkText: '#f7fafc',
      },
    },
  },
}

これで、次のようにカスタム ダーク モード カラーを使用できるようになります:

<div class="dark:bg-darkBackground dark:text-darkText">
    Custom Dark Mode Colors
</div>

---

結論

Tailwind CSS を使用すると、システム設定または手動切り替えを通じて、ダーク モードを簡単に実装できます。ダーク バリアントを使用すると、さまざまなユーザーの好みにシームレスに調整できる、視覚的に魅力的なデザインを作成できます。

---

LinkedIn でフォローしてください - リドイ ハサン
私のウェブサイトにアクセスしてください - ridoyweb.com
次に読む-
CSS を記述するためのベスト プラクティス

以上がTailwind CSS とダークモードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。