💎

【Tailwind和訳】CORE CONCEPTS/Dark Mode

2021/10/23に公開

Tailwind CSS

tech

この記事について

この記事は、CORE CONCEPTS/Dark Modeの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

ダークモード

Tailwind CSS を使用して、ダークモードでサイトのスタイルを設定します。

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

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

<div class="bg-white dark:bg-gray-800">
  <h1 class="text-gray-900 dark:text-white">Dark mode is here!</h1>
  <p class="text-gray-600 dark:text-gray-300">Lorem ipsum...</p>
</div>

ファイルサイズを考慮しているため、ダークモードバリアントはデフォルトで Tailwind で有効になっていないことに注意してください。

これを有効にするには、tailwind.config.jsファイルのdarkModeオプションをmediaに設定します。

tailwind.config.js

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

これで、ユーザーのオペレーティングシステムでダークモードが有効になっている場合は常に、dark：{class}クラスがプレフィックスなしのクラスよりも優先されます。media戦略では、内部でprefers-color-schemeメディア機能を使用しますが、ダークモードの手動切り替えをサポートする場合は、クラス」戦略を使用してより詳細に制御することもできます。

デフォルトでは、darkModeが有効になっている場合、darkバリアントは、テキストの色、背景色、境界線の色、グラデーション、プレースホルダーの色など、色に関連するクラスに対してのみ生成されます。

他のバリアントとのスタッキング

darkバリアントは、responsiveバリアントとstate variants（ホバーやフォーカスなど）の両方と組み合わせることができます。

<button class="lg:dark:hover:bg-white ...">
  <!-- ... -->
</button>

これが機能するためには、レスポンシブバリアントが最初に来て、次にdarkになり、次に状態バリアントが来る必要があります。

他のユーティリティを有効にする

他のユーティリティでdarkバリアントを有効にするには、有効にするユーティリティのバリアントリストにdarkを追加します。

tailwind.config.js

module.exports = {
  // ...
  variants: {
    extend: {
      textOpacity: ['dark']
    }
  }
}

デフォルトでは、darkバリアントは、backgroundColor、borderColor、gradientColorStops、placeholderColor、およびtextColorに対して有効になっています。

ダークモードを手動で切り替える

オペレーティングシステムの設定に依存するのではなく、手動でダークモードを切り替えることをサポートする場合は、media戦略の代わりにclass戦略を使用します。

tailwind.config.js

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

現在、prefers-color-schemeに基づいて適用されるdark：{class}クラスの代わりに、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>

darkクラスをhtml要素に追加する方法はあなた次第ですが、一般的なアプローチは、どこか（localStorageなど）から設定を読み取り、それに応じて DOM を更新する JS を使用することです。

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

// ページの読み込み時またはテーマを変更するときは、FOUCを回避するために `head`にインラインを追加するのが最適です
if (
  localStorage.theme === "dark" ||
  (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)
) {
  document.documentElement.classList.add("dark")
} else {
  document.documentElement.classList.remove("dark")
}
// ユーザーが明示的にライトモードを選択するときはいつでも
localStorage.theme = "light"
// ユーザーが明示的にダークモードを選択したときはいつでも
localStorage.theme = "dark"
// ユーザーがOSの設定を尊重することを明示的に選択したときはいつでも
localStorage.removeItem("theme")

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

特異性に関する考慮事項

class戦略を使用する場合、セレクターに追加のクラスが含まれるため、ダークモードユーティリティの特異性は通常のユーティリティよりも高くなります。これは、特定の状況では、ユーティリティのいくつかの組み合わせの動作が、mediaモードの場合とclassモードの場合でわずかに異なる可能性があることを意味します。

たとえば、次の HTML について考えてみます。

<div class="text-black text-opacity-50 dark:text-white">
  <!-- ... -->
</div>

media戦略を使用する場合、dark：text-whiteはtext-blackおよびtext-opacity-50と同じ特異性を持ちます。text-opacity-50は、生成された CSS でdark：text-whiteよりも後で定義されるため、白いテキストの不透明度は 50％になります。

class戦略を使用する場合、dark：text-whiteの特異性が高いため、より早く定義されても、実際にはtext-opacity-50をオーバーライドし、不透明度を 1 にリセットします。したがって、classストラテジーを使用する場合は、ダークモードで不透明度を再指定する必要があります。

<div class="text-black text-opacity-50 dark:text-white dark:text-opacity-50">
  <!-- ... -->
</div>

Discussion

ログインするとコメントできます