Applying Dark Variants
Prefix any utility with dark:* to apply a different style in dark mode, covering colors, backgrounds, borders, and shadows.
Applying Dark Variants is a free Tailwind CSS Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Tailwind CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
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.
Frequently asked questions
Is the “Applying Dark Variants” lesson free?
Yes — the full text of “Applying Dark Variants” is free to read here on the web, and the Tailwind CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Tailwind CSS Academy course, upgrade to CoddyKit PRO.
What will I learn in “Applying Dark Variants”?
Prefix any utility with dark:* to apply a different style in dark mode, covering colors, backgrounds, borders, and shadows. You practise Tailwind CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Tailwind CSS Academy?
No prior experience is required. Tailwind CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Applying Dark Variants” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Tailwind CSS Academy lesson?
Yes. Every Tailwind CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Dark Mode Strategies
- Applying Dark Variants
- Building a Dark Mode Toggle
- Dark Mode for Complex Components