複雑なコンポーネントのダークモード対応
カード、ナビバー、モーダル、フォーム入力にDarkバリアントを適用し、両方のテーマに対応した洗練されたコンポーネントを構築します。
「複雑なコンポーネントのダークモード対応」はCoddyKit上の無料Tailwind CSS Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTailwind CSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Tailwind CSS Academyコースには全4レッスンが含まれています。
このレッスンの一部はまだ翻訳されておらず、英語で表示されています。
Strategy for Complex Components
Complex UI components like cards, navbars, modals, and form inputs have many layered elements — each with its own background, text, border, and shadow that must change in dark mode. The key strategy is to handle dark variants at every layer systematically: surface color, content color, border and divider color, and interactive state colors. Missing any layer creates an inconsistent dark mode experience.
Dark Mode Card Component
A card typically has an outer container, an optional image, a content section with title and description, and an action footer. Each of these layers needs both light and dark variants. The outer container switches from white to a dark gray. Text goes from dark to light. Borders and dividers become lighter grays to remain visible without being harsh.
<div class="bg-white dark:bg-gray-800 rounded-xl shadow dark:shadow-none dark:border dark:border-gray-700 overflow-hidden">
<img src="/image.jpg" alt="" class="w-full h-48 object-cover" />
<div class="p-5">
<h3 class="text-gray-900 dark:text-white font-semibold text-lg">Card Title</h3>
<p class="text-gray-500 dark:text-gray-400 mt-1 text-sm">Card description goes here.</p>
<div class="border-t border-gray-100 dark:border-gray-700 mt-4 pt-4">
<button class="text-blue-600 dark:text-blue-400 font-medium text-sm hover:underline">Read more</button>
</div>
</div>
</div>Dark Mode Navbar
A navbar needs its background, text links, and interactive elements to all adapt. In light mode, a white navbar with gray text is common. In dark mode, switch to a dark background like dark:bg-gray-900 with lighter link text. The active link color typically shifts to a lighter variant of the brand color to maintain visibility against the dark background.
<nav class="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 px-6 py-4">
<div class="flex items-center justify-between">
<a href="/" class="text-gray-900 dark:text-white font-bold text-xl">MyApp</a>
<div class="flex gap-6">
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white text-sm font-medium">Features</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white text-sm font-medium">Pricing</a>
</div>
</div>
</nav>Dark Mode Modal
Modals have two distinct surfaces: the backdrop overlay and the modal content panel. The backdrop should darken in both modes — typically a semi-transparent black. The content panel uses the same card-style dark treatment: dark gray background, light text, subtle borders. The close button and action buttons also need their dark variants applied.
<div class="fixed inset-0 bg-black/50 dark:bg-black/70 z-40 flex items-center justify-center">
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-xl dark:shadow-gray-900 p-6 w-full max-w-md mx-4">
<h2 class="text-gray-900 dark:text-white text-lg font-semibold">Modal Title</h2>
<p class="text-gray-500 dark:text-gray-400 mt-2 text-sm">Modal description content.</p>
<div class="flex gap-3 mt-6 justify-end">
<button class="px-4 py-2 text-gray-600 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg">Cancel</button>
<button class="px-4 py-2 bg-blue-600 dark:bg-blue-500 text-white rounded-lg">Confirm</button>
</div>
</div>
</div>Dark Mode Form Inputs
Form inputs require particular attention in dark mode because the browser's default autofill and focus styles can clash with your dark background. Override the background and text color explicitly, and ensure the focus ring remains visible. Use a dark gray background for inputs, lighter placeholder text, and a bright focus ring color that contrasts well against the dark surface.
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email</label>
<input
type="email"
class="w-full bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600
text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500
rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400"
placeholder="you@example.com"
/>
</div>
</div>Dark Mode Sidebar
Sidebars often use a slightly different shade than the main content area to create visual separation. In dark mode, you might use dark:bg-gray-900 for the sidebar and dark:bg-gray-800 for the main content. Active sidebar links need a highlighted background — typically a dark variant of the brand color or a subtly lighter gray than the sidebar itself.
<aside class="w-64 h-screen bg-gray-50 dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 p-4">
<nav class="space-y-1">
<a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 font-medium">
Dashboard
</a>
<a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800">
Settings
</a>
</nav>
</aside>Dark Mode Alert and Badge Components
Informational alerts and status badges use color to communicate meaning — green for success, red for error, yellow for warning. In dark mode, saturated background colors become too harsh. Use muted dark variants: instead of bg-green-100, use dark:bg-green-900/30 with dark:text-green-300. This retains the semantic color meaning while looking polished on dark surfaces.
<div class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-4">
<p class="text-green-700 dark:text-green-300 text-sm font-medium">Success! Your changes have been saved.</p>
</div>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300">
Active
</span>Dark Mode Table
Tables need striped row colors that work in both modes, header backgrounds that distinguish them from data rows, and hover states that remain subtle. Replace light gray stripes with dark gray variants, keep borders very subtle, and ensure text in all cells meets contrast requirements. The table header typically gets a slightly darker background than the data rows.
<table class="w-full text-sm">
<thead class="bg-gray-50 dark:bg-gray-800">
<tr>
<th class="px-4 py-3 text-left text-gray-500 dark:text-gray-400 font-medium">Name</th>
<th class="px-4 py-3 text-left text-gray-500 dark:text-gray-400 font-medium">Status</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-100 dark:divide-gray-700">
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800">
<td class="px-4 py-3 text-gray-900 dark:text-gray-100">Alice</td>
<td class="px-4 py-3 text-green-600 dark:text-green-400">Active</td>
</tr>
</tbody>
</table>Dark Mode Code Blocks
Code blocks and syntax highlighted content often look better in dark mode because dark backgrounds mimic the terminal aesthetic that developers are familiar with. In light mode, use a very light gray background for code. In dark mode, the surface naturally darkens. Keep the font color slightly off-white like dark:text-gray-200 to avoid eye strain from pure white text on dark backgrounds.
<pre class="bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-4 overflow-x-auto">
<code class="text-gray-800 dark:text-gray-200 text-sm font-mono">
const greeting = 'Hello, Tailwind!';
</code>
</pre>Systematizing Dark Mode With a Palette
As your component count grows, manually choosing dark variants for every element becomes tedious and inconsistent. A better approach is to establish a semantic color palette in your config: define surface, on-surface, border, and muted as CSS variables that switch values under the dark class. Then every component uses these semantic tokens instead of raw color shades, making your dark mode consistent by design.
/* In your CSS */
:root {
--surface: theme('colors.white');
--on-surface: theme('colors.gray.900');
--border: theme('colors.gray.200');
}
.dark {
--surface: theme('colors.gray.800');
--on-surface: theme('colors.gray.100');
--border: theme('colors.gray.700');
}
/* In HTML */
<div class="bg-[var(--surface)] text-[var(--on-surface)] border-[var(--border)] border rounded-lg p-4">Testing Complex Component Dark Mode
Test complex components in dark mode by toggling the dark class in browser DevTools and visually inspecting every layer. Check: are all text elements readable? Are borders visible but not harsh? Do interactive states (hover, focus, active) work? Do semantic colors (success green, error red) retain their meaning? Automate this with screenshot comparison tests for critical components.
Quick Check
Test your understanding of applying dark mode to complex Tailwind components.
Lesson Recap
In this lesson you learned: complex components need dark variants at every layer — surface, text, border, and interactive states, semantic color utilities like alerts and badges work best with dark, muted opacity variants like dark:bg-green-900/30, and a CSS variable-based semantic palette keeps dark mode consistent across many components. Next up we explore Tailwind's configuration file in depth.
よくある質問
「複雑なコンポーネントのダークモード対応」レッスンは無料ですか？
はい。「複雑なコンポーネントのダークモード対応」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Tailwind CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Tailwind CSS Academyコースには全4レッスンが含まれています。
「複雑なコンポーネントのダークモード対応」で何を学びますか？
カード、ナビバー、モーダル、フォーム入力にDarkバリアントを適用し、両方のテーマに対応した洗練されたコンポーネントを構築します。 ブラウザで直接実行するハンズオンコードでTailwind CSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Tailwind CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTailwind CSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「複雑なコンポーネントのダークモード対応」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTailwind CSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのTailwind CSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- ダークモードの戦略
- Darkバリアントの適用
- ダークモードの切り替えの構築
- 複雑なコンポーネントのダークモード対応