复杂组件的深色模式
为卡片、导航栏、模态框和表单输入应用深色变体，构建同时支持两种主题的精致组件。
复杂组件的深色模式 是 CoddyKit 上的免费 Tailwind CSS Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 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.
常见问题解答
「复杂组件的深色模式」课时是免费的吗？
是的 — 「复杂组件的深色模式」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Tailwind CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 Tailwind CSS Academy 课程共包含 4 节课。
「复杂组件的深色模式」这节课中我会学到什么？
为卡片、导航栏、模态框和表单输入应用深色变体，构建同时支持两种主题的精致组件。 你通过在浏览器中直接运行的动手代码来练习 Tailwind CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Tailwind CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Tailwind CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「复杂组件的深色模式」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Tailwind CSS Academy 课中编写并运行代码吗？
能。每节 Tailwind CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。