Back

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

OpenReplay Team OpenReplay Team

Sep 23, 2025 · 3 min read

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

ダークモードは単なるトレンドではなく、ユーザーの期待となっています。しかし、多くの開発者がその実装を複雑にしすぎています。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:を前置するだけです。

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

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. Check our GitHub repo and join the thousands of developers in our community.

OpenReplay

More articles from OpenReplay Blog