Tailwind CSS
Dark mode
dark: prefix, media vs class stratégia, praktikus példa.
Dark mode
Hogyan működik?
A Tailwind dark mode-ja a dark: prefix-en alapul. Ami dark: prefix-szel van megjelölve, az csak sötét módban érvényes:
<div class="bg-white text-gray-900 dark:bg-gray-900 dark:text-white">
Világos módban fehér háttér, sötétben szürke
</div>Media strategy (alapértelmezett v4-ben)
Az alapértelmezett viselkedés: a dark mode a felhasználó operációs rendszer beállítása alapján aktiválódik (prefers-color-scheme: dark).
/* Tailwind v4-ben ez automatikus – nincs külön beállítás szükséges */
@import "tailwindcss";Class strategy (kézi vezérlés)
Ha te akarod vezérelni (pl. egy kapcsolóval), a class stratégiát kell használni. A v4-ban:
@import "tailwindcss";
@variant dark (&:where(.dark, .dark *));Ezután a dark class-t a <html> elemre kell tenni:
<!-- Sötét mód be -->
<html class="dark">...</html>
<!-- Sötét mód ki -->
<html>...</html>JavaScript-tel togglelni:
document.documentElement.classList.toggle('dark')Mikor melyiket válaszd?
| Stratégia | Mikor használd |
|---|---|
| Media | Ha elég az OS beállítását követni (blog, portfólió) |
| Class | Ha a felhasználónak lehetőséget adsz a váltásra (app, dashboard) |
Praktikus dark mode példa
<div class="min-h-screen bg-gray-50 dark:bg-gray-950">
<header class="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800">
<div class="container mx-auto px-4 py-4 flex items-center justify-between">
<h1 class="text-xl font-bold text-gray-900 dark:text-white">
Az oldal neve
</h1>
<button class="text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white">
Beállítások
</button>
</div>
</header>
<main class="container mx-auto px-4 py-8">
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6
border border-gray-200 dark:border-gray-700">
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">Kártya cím</h2>
<p class="mt-2 text-gray-600 dark:text-gray-400">Kártya szöveg</p>
</div>
</main>
</div>Összefoglaló
A dark mode Tailwind-del nem más, mint minden elemnek megadni a
dark:változatát is. A legelterjedtebb minta:bg-white dark:bg-gray-900,text-gray-900 dark:text-white,border-gray-200 dark:border-gray-700. A class stratégia ajánlott, ha toggle gombot akarsz biztosítani.