应用深色变体
在任意实用程序前添加 dark:*，即可在深色模式下应用不同样式，涵盖颜色、背景、边框和阴影。
应用深色变体 是 CoddyKit 上的免费 Tailwind CSS Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Tailwind CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Tailwind CSS Academy 课程共包含 4 节课。
本课时的部分内容尚未翻译，以英文显示。
The dark: Prefix in Action
Once your dark mode strategy is configured, you use the dark: prefix to apply alternative styles in dark mode. Think of it as a conditional: the utility after dark: only activates when dark mode is in effect. You place both the default and dark versions on the same element, and Tailwind generates the correct CSS for both states. This keeps all style logic in one place — the HTML.
<p class="text-gray-900 dark:text-gray-100">
This text is dark on light backgrounds and light on dark backgrounds.
</p>Dark Background Colors
Background color is the most fundamental dark mode concern. Switch from light surfaces like bg-white or bg-gray-50 to dark surfaces like bg-gray-900 or bg-slate-800. Tailwind's color palette provides shades from 50 (lightest) to 950 (darkest), giving you fine-grained control over the exact tone you want in each mode.
<div class="bg-white dark:bg-gray-900 min-h-screen">
<div class="bg-gray-50 dark:bg-gray-800 p-6 rounded-xl">
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
Layered surfaces for depth in both modes
</div>
</div>
</div>Dark Text Colors
Text color must maintain readability in both modes. In light mode, dark text on a light background is standard. In dark mode, use lighter text shades — typically dark:text-gray-100 for primary text, dark:text-gray-300 for secondary text, and dark:text-gray-400 for muted text. This three-level hierarchy helps maintain visual hierarchy in dark mode just as it does in light mode.
<div class="bg-white dark:bg-gray-900 p-6">
<h1 class="text-gray-900 dark:text-gray-100 text-2xl font-bold">Primary Text</h1>
<p class="text-gray-600 dark:text-gray-300 mt-2">Secondary description text.</p>
<span class="text-gray-400 dark:text-gray-500 text-sm">Muted metadata</span>
</div>Dark Border Colors
Borders often appear too prominent on dark backgrounds if left at their default color. Use dark:border-gray-700 or dark:border-gray-600 to keep borders subtle in dark mode. For decorative dividers, you might use even lighter borders like dark:border-gray-800 to create gentle separation without visual noise.
<div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
<hr class="border-gray-100 dark:border-gray-800 my-4" />
<p class="text-gray-700 dark:text-gray-300">Content inside a bordered card</p>
</div>Dark Shadow Utilities
Shadows work differently in dark mode because dark backgrounds make traditional box shadows invisible. Use Tailwind's shadow-{color} utilities to add colored shadows, or simply reduce shadow intensity in dark mode. Alternatively, use subtle borders instead of shadows to create depth on dark surfaces — a common pattern in modern dark UIs.
<div class="
bg-white shadow-lg
dark:bg-gray-800 dark:shadow-none dark:border dark:border-gray-700
rounded-xl p-6
">
<p>Card with shadow in light, border in dark</p>
</div>Dark Variants on Interactive Elements
Buttons and links need dark mode variants for all their states: default, hover, focus, and active. Layer the dark: prefix with state variants to handle every interaction. Remember that contrast ratios must meet WCAG standards in both modes — a bright blue button that works in light mode may need a lighter shade like dark:bg-blue-400 to maintain sufficient contrast against a dark background.
<button class="
bg-blue-600 hover:bg-blue-700 text-white
dark:bg-blue-500 dark:hover:bg-blue-400
focus:outline-none focus:ring-2 focus:ring-blue-400
dark:focus:ring-blue-300
font-semibold px-5 py-2 rounded-lg transition-colors
">
Primary Button
</button>Dark Variants for SVG Icons
SVG icons styled with Tailwind's text-* utilities (which control the CSS currentColor) inherit dark variants naturally. Apply dark:text-gray-300 to an icon's wrapper or directly to the SVG element. For filled SVG icons that use fill-current or stroke-current, the same approach works because they both inherit the color property.
<svg class="w-6 h-6 text-gray-500 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg>Dark Mode for Placeholder Text
Form input placeholders also need dark variants. Use the placeholder: variant together with dark: to style placeholder text in dark mode. Input backgrounds, borders, and text all need their own dark counterparts too. A consistent input style in dark mode typically uses a medium-dark background with lighter placeholder text and a subtle border.
<input
type="text"
placeholder="Search..."
class="
bg-white border-gray-300 text-gray-900
placeholder:text-gray-400
dark:bg-gray-800 dark:border-gray-600 dark:text-gray-100
dark:placeholder:text-gray-500
rounded-lg px-4 py-2 w-full
focus:outline-none focus:ring-2 focus:ring-blue-500
"
/>Dark Variants with Opacity Modifier
You can combine the dark: prefix with Tailwind's opacity modifier syntax. For example, dark:bg-white/10 applies a white background at 10% opacity in dark mode — a useful technique for creating subtle card surfaces with a glass-like effect. This composability is one of Tailwind's most powerful features for building sophisticated dark themes.
<div class="bg-gray-100 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl p-6 backdrop-blur">
<p class="text-gray-800 dark:text-gray-200">Glassmorphism-style card</p>
</div>Avoiding Common Dark Mode Mistakes
A common mistake is applying only background dark variants without updating text and border colors — this results in dark-on-dark or light-on-light combinations. Always update all related properties together: background, text, border, and shadow. Another pitfall is using pure black (bg-black) as the dark surface — it creates harsh contrast. Prefer dark gray shades like bg-gray-900 or bg-slate-900 for a softer look.
<!-- BAD: Only background updated, text becomes invisible -->
<p class="text-gray-900 dark:bg-gray-900">Invisible text in dark mode!</p>
<!-- GOOD: Both background and text updated together -->
<p class="text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-900">Readable in both modes</p>Testing Dark Mode During Development
When using the class strategy, you can test dark mode in development by manually adding the dark class to your <html> element. Browser DevTools also let you emulate prefers-color-scheme: dark regardless of your strategy. For automated testing, write tests that toggle the dark class and verify that the correct computed styles are applied to your key elements.
<!-- Quick test: add dark class to html -->
<html class="dark">
<!-- Remove to go back to light -->
<html>Quick Check
Test your understanding of applying dark variants in Tailwind CSS.
Lesson Recap
In this lesson you learned: the dark: prefix applies alternative styles when dark mode is active, backgrounds, text, borders, and shadows all need dark variants to maintain visual quality, and you can combine dark: with state variants and opacity modifiers for fine-grained control. Next up we build a JavaScript dark mode toggle that switches themes at runtime.
常见问题解答
「应用深色变体」课时是免费的吗？
是的 — 「应用深色变体」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Tailwind CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 Tailwind CSS Academy 课程共包含 4 节课。
「应用深色变体」这节课中我会学到什么？
在任意实用程序前添加 dark:*，即可在深色模式下应用不同样式，涵盖颜色、背景、边框和阴影。 你通过在浏览器中直接运行的动手代码来练习 Tailwind CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Tailwind CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Tailwind CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「应用深色变体」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Tailwind CSS Academy 课中编写并运行代码吗？
能。每节 Tailwind CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。