Tailwind CSS とダークモード-CSSチュートリアル-php.cn

Tailwind CSS とダークモード

DDD

リリース： 2024-10-08 16:09:02

オリジナル

714 人が閲覧しました

Tailwind CSS and Dark Mode

この記事では、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 を使用した例:

<html class="dark">
  <body>
    <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>
  </body>
</html>

ログイン後にコピー

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

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 サイトの他の関連記事を参照してください。

Tailwind CSS とダークモード

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

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

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

例:

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

JavaScript を使用した例:

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

例:

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

例:

結論

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

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