Tailwindでサイトにダークモードを追加する

Tailwind CSSのdarkバリアントを使ったダークモード実装を解説。システム設定検出、手動トグル、localStorageによる設定の永続化を網羅する。

Sep 23, 2025 · 3 min read

ダークモードは単なるトレンドではなく、ユーザーの期待となっています。しかし、多くの開発者がその実装を複雑にしすぎています。Tailwind CSSを使えば、わずか数行のコードとフレームワークへの依存なしで、サイトにダークモードを追加できます。

このチュートリアルでは、自動ダークモード（システム設定の尊重）と手動切り替えの両方をユーザー設定の永続化とともにカバーします。Tailwindの組み込みdarkバリアントを使用して、どちらのアプローチも数分で実装する方法を学べます。

重要なポイント

Tailwindのdark:バリアントは最小限の設定でダークモードを有効にします
システム駆動型ダークモードはJavaScriptなしで自動的に動作します
手動切り替えによりユーザーが表示設定をコントロールできます
localStorageはページ読み込み時のテーマのちらつきを防ぎます

Tailwind CSSでのダークモードの仕組み

dark:バリアントの説明

Tailwind CSSはdark:バリアントを提供し、ダークモードがアクティブな時に条件付きでスタイルを適用します。任意のユーティリティクラスにdark:を前置するだけで、ダークモードでの外観を定義できます：

<div class="bg-white dark:bg-gray-900">
  <h1 class="text-gray-900 dark:text-white">Hello World</h1>
  <p class="text-gray-600 dark:text-gray-400">
    This text adapts to your theme preference
  </p>
</div>

デフォルトでは、Tailwindはユーザーのシステム設定を検出するためにprefers-color-scheme CSSメディアクエリを使用します。設定は不要で、そのまま動作します。

システム駆動型ダークモード（自動）

prefers-color-schemeの使用

最もシンプルなダークモード実装にはJavaScriptが一切不要です。ユーザーのオペレーティングシステムがダークモードに設定されている場合、Tailwindは自動的にダークモードユーティリティを適用します：

<!-- このカードはライトモードでは白、ダークモードでは濃いグレーになります -->
<article class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-lg">
  <h2 class="text-xl font-bold text-gray-900 dark:text-white">
    Automatic Dark Mode
  </h2>
  <p class="mt-2 text-gray-600 dark:text-gray-300">
    This component respects your system theme preference
  </p>
</article>

このアプローチは即座に動作しますが、1つの制限があります：ユーザーがあなたのサイト専用でシステム設定を上書きできません。

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

クラスベースの実装

ユーザーにコントロールを与えるには、親要素の.darkクラスを使用するようにTailwindを設定します。Tailwind CSS v3.4以降では、CSSに以下を追加します：

@import "tailwindcss";

/* For Tailwind CSS v4+ */
@custom-variant dark (&:where(.dark, .dark *));

Tailwindの以前のバージョン（v3.x）では、tailwind.config.jsで設定します：

module.exports = {
  darkMode: 'class',
  // ... rest of your config
}

これで、親要素にdarkクラスが存在する場合にダークモードがアクティブになります：

<html class="dark">
  <body>
    <div class="bg-white dark:bg-black">
      <!-- Dark mode is active -->
    </div>
  </body>
</html>

このJavaScriptでダークモードを切り替えます：

// Toggle dark mode
document.documentElement.classList.toggle('dark');

データ属性メソッド

一部の開発者はテーマ管理にデータ属性を好みます。data-themeを使用するようにTailwindを設定します：

@import "tailwindcss";

/* For Tailwind CSS v4+ */
@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));

その後、属性を通してダークモードをコントロールします：

<html data-theme="dark">
  <body>
    <div class="bg-white dark:bg-black">
      <!-- Dark mode active when data-theme="dark" -->
    </div>
  </body>
</html>

ユーザー設定の永続化

localStorage実装

ユーザーはテーマの選択が持続することを期待します。システムデフォルトを尊重しながら設定を記憶する完全なソリューションは以下の通りです：

// Check for saved preference or default to system preference
function getThemePreference() {
  const savedTheme = localStorage.getItem('theme');
  if (savedTheme) {
    return savedTheme;
  }
  return window.matchMedia('(prefers-color-scheme: dark)').matches 
    ? 'dark' 
    : 'light';
}

// Apply theme on load
function applyTheme(theme) {
  if (theme === 'dark') {
    document.documentElement.classList.add('dark');
  } else {
    document.documentElement.classList.remove('dark');
  }
}

// Initialize theme
applyTheme(getThemePreference());

// Theme toggle function
function toggleTheme() {
  const currentTheme = document.documentElement.classList.contains('dark') 
    ? 'dark' 
    : 'light';
  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
  
  applyTheme(newTheme);
  localStorage.setItem('theme', newTheme);
}

ページ読み込み時の間違ったテーマのちらつきを防ぐには、<head>にこのインラインスクリプトを追加します：

<script>
  // Prevent FOUC (Flash of Unstyled Content)
  if (localStorage.theme === 'dark' || 
      (!localStorage.theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    document.documentElement.classList.add('dark');
  }
</script>

Tailwindでのダークモードのベストプラクティス

パフォーマンス: レイアウトシフトを防ぐため、テーマ検出スクリプトを<head>に配置します。上記のインラインスクリプトはページレンダリング前に実行されます。

アクセシビリティ: 両方のテーマで十分な色のコントラストを確保します。ダークモードは単に色を反転させるだけではありません。適切なコントラスト比で読みやすさを維持します（WCAG AA標準では通常のテキストに4.5:1を推奨）。

テスト: 開発中は常に両方のテーマをテストします。ブラウザのDevToolsを使用して、システム設定を変更せずにprefers-color-schemeを素早く切り替えます。

色の一貫性: Tailwindのカラーパレットを体系的に使用します。例えば、ライト背景にgray-100を使用する場合、ダークモードの同等品としてgray-800またはgray-900を検討します。

まとめ

Tailwind CSSでダークモードを実装するには最小限のコードと外部依存関係が不要です。システム駆動型または手動切り替えのどちらを選択しても、darkバリアントによりテーマ対応のスタイリングが簡単になります。シンプルさのために自動ダークモードから始めて、ユーザーが表示体験をより詳細にコントロールする必要がある場合に手動コントロールを追加しましょう。

FAQ

システム設定と手動切り替えの両方を一緒に使用できますか？

はい、ライト、ダーク、システムオプションを提供する3方向切り替えを実装できます。ユーザーの選択をlocalStorageに保存し、システムモードを選択したかどうかを確認してOS設定を尊重します。

ダークモードで画像とアイコンをどう扱いますか？

簡単な調整にはCSSフィルターを使用するか、代替画像ソースを提供します。アイコンについては、SVGでcurrentColorを使用してテキスト色を継承するか、Tailwindユーティリティで不透明度調整を適用することを検討してください。

darkバリアントはTailwindのカスタムカラーで動作しますか？

もちろんです。darkバリアントは、設定で定義されたカスタムカラーを含む任意のTailwindユーティリティで動作します。ダークモードで条件付きに適用するには、任意のクラスにdark:を前置するだけです。

ダークモード追加のパフォーマンス影響は何ですか？

最小限です。darkバリアントはCSSルールのみを追加し、JavaScriptのオーバーヘッドはありません。主な考慮事項は、ドキュメントヘッドの早い段階でテーマ検出スクリプトを読み込むことで、スタイル未適用コンテンツのちらつきを防ぐことです。

DevTools for the frontend

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers.

Star on GitHub12k