Dark Mode mit Tailwind CSS – Einsteigerfreundlicher Leitfaden

Moderne Websites implementieren häufig einen Dark Mode, um die Nutzererfahrung zu verbessern, visuelle Ermüdung zu reduzieren und die Barrierefreiheit zu erhöhen. Da Browser-Dark-Modes nur die Benutzeroberfläche des Browsers betreffen, bleibt eine Website ohne eigene Dark-Mode-Styles unverändert.

In diesem Beitrag zeige ich dir, wie du mit Tailwind CSS einen Dark Mode umsetzt, der sich per Button ein- und ausschalten lässt inklusive Speicherung der Nutzerpräferenz.

 

Warum Tailwind für Dark Mode?

Mit Tailwind definierst du Dark-Varianten direkt an der Komponente. Du ergänzt einfach eine zweite Klasse mit dem Präfix dark: fertig. Das hält den Code übersichtlich und vermeidet doppelte Stylesheets.

 

Dark Mode per Klassenselektor aktivieren

Standardmäßig richtet sich Tailwind am Betriebssystem aus (prefers-color-scheme). Möchtest du manuell umschalten können, aktivierst du den Dark Mode über einen Klassenselektor. Ergänze dazu in deiner Tailwind-Eingabedatei:

 

src/input.css

@import "tailwindcss";
/* Aktiviert dark: auf allen Nachfahren, sobald .dark im DOM vorkommt */
@custom-variant dark (&:where(.dark, .dark *));

 

Jetzt kannst du Light- und Dark-Stile nebeneinander vergeben:

HTML

<div class="bg-white text-black rounded p-6 shadow dark:bg-gray-900 dark:text-white"> <h3 class="text-xl font-semibold">Schreibt auch kopfüber</h3> <p class="text-sm opacity-80">Funktioniert in jeder Lage sogar im All.</p> </div>

 

Button zum Umschalten (mit Label-Wechsel)

Per JavaScript fügen wir der html-Wurzel die Klasse dark hinzu oder entfernen sie und speichern die Wahl in localStorage. So bleibt die Einstellung auch nach einem Seitenwechsel erhalten. Außerdem ändern wir das Button-Label von „Dark Mode“ zu „Light Mode“.

 

Button (HTML)

<button id="darkModeBtn" type="button" class="inline-flex items-center gap-2 px-3 py-2 rounded bg-neutral-900 text-white hover:opacity-90 dark:bg-white dark:text-black">  <span id="darkModeLabel">Dark Mode</span> </button>

 

JavaScript

<script> // Beim Laden: gespeichertes Theme anwenden (function () { const html = document.documentElement; const saved = localStorage.getItem("theme"); // "dark" | "light" | null if (saved === "dark") html.classList.add("dark"); if (saved === "light") html.classList.remove("dark"); updateDarkModeLabels(); })();
function toggleDarkMode() {
const html = document.documentElement;
const isDark = html.classList.toggle("dark");
localStorage.setItem("theme", isDark ? "dark" : "light");
updateDarkModeLabels();
}

function updateDarkModeLabels() {
const label = document.getElementById("darkModeLabel");
if (label) {
label.textContent = document.documentElement.classList.contains("dark")
? "Light Mode"
: "Dark Mode";
}
}

// Klick-Handler registrieren
document.getElementById("darkModeBtn")?.addEventListener("click", toggleDarkMode);

 

Praxis-Tipps

  • Dynamische Klassen safelisten: Wenn Klassen (z. B. Farben) aus einem CMS kommen, erkennt der Compiler sie u. U. nicht. Du kannst sie in src/input.css „safelisten“:
src/input.css

@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));
/* Beispiele für Safelisting */
@source inline("dark:bg-black");
@source inline("text-white bg-[#121212]");
  • Setze die Klasse dark möglichst weit oben im DOM (am besten auf <html>), dann greifen alle dark:-Varianten zuverlässig.
  • Vermeide, gleichzeitig systemweiten Dark Mode zu erzwingen, wenn du manuell per Button steuerst sonst „gewinnt“ manchmal der Browser.

 

Fazit

Mit Tailwind CSS bekommst du einen klar strukturierten Dark Mode, der sich sehr fein steuern lässt. Ein kleiner Toggle plus zwei, drei Utilities mehr braucht es oft nicht, um eine angenehme, barrierearme Nachtansicht zu liefern.
Wenn du Unterstützung bei der Umsetzung barrierefreier, performanter und ästhetisch ansprechender Websites suchst, stehen wir dir als Full-Service Internetagentur aus München gerne zur Seite.

 

Kontaktieren Sie uns!