ダークモード

ダークモードでサイトをスタイルするためのバリアントの使用

概要

ダークモードが多くのオペレーティングシステムの主要機能となった今、デフォルトのデザインに合わせてウェブサイトのダークバージョンを設計することがますます一般的になっています。

これをできるだけ簡単にするために、Tailwindにはdarkバリアントが含まれており、ダークモードが有効になっているときにサイトのスタイルを異なるように設定できます。

ライトモード

逆さまに書ける

ゼログラビティペンは、逆さまを含むあらゆる方向で書くことができます。宇宙空間でも使用できます。

ダークモード

逆さまに書ける

ゼログラビティペンは、逆さまを含むあらゆる方向で書くことができます。宇宙空間でも使用できます。

<div class="bg-white dark:bg-gray-800 rounded-lg px-6 py-8 ring shadow-xl ring-gray-900/5">
  <div>
    <span class="inline-flex items-center justify-center rounded-md bg-indigo-500 p-2 shadow-lg">
      <svg class="h-6 w-6 stroke-white" ...>
        <!-- ... -->
      </svg>
    </span>
  </div>
  <h3 class="text-gray-900 dark:text-white mt-5 text-base font-medium tracking-tight ">Writes upside-down</h3>
  <p class="text-gray-500 dark:text-gray-400 mt-2 text-sm ">
    The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.
  </p>
</div>

デフォルトでは、これはprefers-color-scheme CSSメディア機能を使用しますが、ダークバリアントをオーバーライドすることで、ダークモードの手動切り替えをサポートするサイトを構築することもできます。

ダークモードの手動切り替え

ダークテーマをprefers-color-schemeメディアクエリの代わりにCSSセレクターによって駆動したい場合は、darkバリアントをオーバーライドしてカスタムセレクターを使用してください。

app.css

@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

これで、dark:*ユーティリティはprefers-color-schemeに基づいて適用される代わりに、HTMLツリーの前の方にdarkクラスが存在するたびに適用されるようになります。

HTML

<html class="dark">
  <body>
    <div class="bg-white dark:bg-black">
      <!-- ... -->
    </div>
  </body>
</html>

html要素にdarkクラスをどのように追加するかはあなた次第ですが、一般的なアプローチは、class属性を更新し、その設定をlocalStorageのような場所に同期させるJavaScriptを使用することです。

データ属性の使用

ダークモードをアクティブにするためにクラスの代わりにデータ属性を使用するには、代わりに属性セレクターでdarkバリアントをオーバーライドするだけです。

app.css

@import "tailwindcss";
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

これで、ダークモードユーティリティは、data-theme属性がツリーのどこかでdarkに設定されている場合に常に適用されるようになります。

HTML

<html data-theme="dark">
  <body>
    <div class="bg-white dark:bg-black">
      <!-- ... -->
    </div>
  </body>
</html>

システムテーマのサポート

ライトモード、ダークモード、およびシステムテーマをサポートする3方向のテーマ切り替えを構築するには、カスタムダークモードセレクターとwindow.matchMedia() APIを使用して、システムテーマを検出し、必要に応じてhtml要素を更新します。

ライトモード、ダークモード、そしてオペレーティングシステムの設定を尊重する方法の簡単な例を以下に示します。

spaghetti.js

// On page load or when changing themes, best to add inline in `head` to avoid FOUC
document.documentElement.classList.toggle(
  "dark",
  localStorage.theme === "dark" ||
    (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches),
);
// Whenever the user explicitly chooses light mode
localStorage.theme = "light";
// Whenever the user explicitly chooses dark mode
localStorage.theme = "dark";
// Whenever the user explicitly chooses to respect the OS preference
localStorage.removeItem("theme");

繰り返しますが、これをどのように管理するかはあなた次第です。サーバー側のデータベースに設定を保存し、サーバーでクラスをレンダリングすることもできます。完全にあなた次第です。

概要

ダークモードの手動切り替え

データ属性の使用

システムテーマのサポート

このページについて