Applicazione delle varianti dark
Aggiunga il prefisso dark:* a qualsiasi utility per applicare uno stile diverso nella modalità scura, includendo colori, sfondi, bordi e ombre.
Applicazione delle varianti dark è una lezione Tailwind CSS Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Tailwind CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Tailwind CSS Academy include 4 lezioni in totale.
Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.
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.
Domande Frequenti
La lezione «Applicazione delle varianti dark» è gratuita?
Sì — il testo completo di «Applicazione delle varianti dark» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Tailwind CSS Academy, passa a CoddyKit PRO. Il corso Tailwind CSS Academy include 4 lezioni in totale.
Cosa imparerò in «Applicazione delle varianti dark»?
Aggiunga il prefisso dark:* a qualsiasi utility per applicare uno stile diverso nella modalità scura, includendo colori, sfondi, bordi e ombre. Eserciti Tailwind CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Tailwind CSS Academy?
Non è richiesta alcuna esperienza precedente. Tailwind CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «Applicazione delle varianti dark»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Tailwind CSS Academy?
Sì. Ogni lezione Tailwind CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Strategie per la modalità scura
- Applicazione delle varianti dark
- Creazione di un interruttore per la modalità scura
- Modalità scura per componenti complessi