Dark Mode zu Ihrer Website mit Tailwind hinzufügen

Sep 23, 2025 · 4 min read

Dark Mode zu Ihrer Website mit Tailwind hinzufügen

Dark Mode ist nicht nur ein Trend – es ist eine Erwartung der Nutzer. Dennoch machen viele Entwickler die Implementierung unnötig kompliziert. Mit Tailwind CSS erfordert das Hinzufügen von Dark Mode zu Ihrer Website nur wenige Zeilen Code und keine Framework-Abhängigkeiten.

Dieses Tutorial behandelt sowohl automatischen Dark Mode (der Systemeinstellungen respektiert) als auch manuelles Umschalten mit persistenten Nutzereinstellungen. Sie lernen, beide Ansätze in wenigen Minuten mit Tailwinds integrierter dark-Variante zu implementieren.

Wichtige Erkenntnisse

Tailwinds dark:-Variante ermöglicht Dark Mode mit minimaler Konfiguration
Systemgesteuerter Dark Mode funktioniert automatisch ohne JavaScript
Manuelle Umschaltung gibt Nutzern Kontrolle über ihre Anzeigeeinstellungen
localStorage verhindert Theme-Flackern beim Laden der Seite

Wie Dark Mode in Tailwind CSS funktioniert

Die dark:-Variante erklärt

Tailwind CSS bietet eine dark:-Variante, die Stile bedingt anwendet, wenn Dark Mode aktiv ist. Setzen Sie einfach dark: vor jede Utility-Klasse, um deren Dark Mode-Erscheinungsbild zu definieren:

<div class="bg-white dark:bg-gray-900">
  <h1 class="text-gray-900 dark:text-white">Hello World</h1>
  <p class="text-gray-600 dark:text-gray-400">
    This text adapts to your theme preference
  </p>
</div>

Standardmäßig verwendet Tailwind die CSS-Media-Query prefers-color-scheme, um die Systemeinstellung des Nutzers zu erkennen. Keine Konfiguration erforderlich – es funktioniert einfach.

Systemgesteuerter Dark Mode (Automatisch)

Verwendung von prefers-color-scheme

Die einfachste Dark Mode-Implementierung erfordert kein JavaScript. Tailwind wendet automatisch Dark Mode-Utilities an, wenn das Betriebssystem des Nutzers auf Dark Mode eingestellt ist:

<!-- Diese Karte wird im Light Mode weiß, im Dark Mode dunkelgrau -->
<article class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-lg">
  <h2 class="text-xl font-bold text-gray-900 dark:text-white">
    Automatic Dark Mode
  </h2>
  <p class="mt-2 text-gray-600 dark:text-gray-300">
    This component respects your system theme preference
  </p>
</article>

Dieser Ansatz funktioniert sofort, hat aber eine Einschränkung: Nutzer können ihre Systemeinstellung nicht spezifisch für Ihre Website überschreiben.

Manueller Dark Mode-Umschalter

Klassenbasierte Implementierung

Um Nutzern Kontrolle zu geben, konfigurieren Sie Tailwind zur Verwendung einer .dark-Klasse auf einem übergeordneten Element. Für Tailwind CSS v3.4 und später fügen Sie dies zu Ihrem CSS hinzu:

@import "tailwindcss";

/* Für Tailwind CSS v4+ */
@custom-variant dark (&:where(.dark, .dark *));

Für frühere Versionen von Tailwind (v3.x) konfigurieren Sie es in Ihrer tailwind.config.js:

module.exports = {
  darkMode: 'class',
  // ... Rest Ihrer Konfiguration
}

Jetzt wird Dark Mode aktiviert, wenn die dark-Klasse auf einem übergeordneten Element vorhanden ist:

<html class="dark">
  <body>
    <div class="bg-white dark:bg-black">
      <!-- Dark Mode ist aktiv -->
    </div>
  </body>
</html>

Schalten Sie Dark Mode mit diesem JavaScript um:

// Dark Mode umschalten
document.documentElement.classList.toggle('dark');

Data-Attribut-Methode

Einige Entwickler bevorzugen Data-Attribute für Theme-Management. Konfigurieren Sie Tailwind zur Verwendung von data-theme:

@import "tailwindcss";

/* Für Tailwind CSS v4+ */
@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));

Dann steuern Sie Dark Mode über das Attribut:

<html data-theme="dark">
  <body>
    <div class="bg-white dark:bg-black">
      <!-- Dark Mode aktiv wenn data-theme="dark" -->
    </div>
  </body>
</html>

Nutzereinstellungen persistieren

localStorage-Implementierung

Nutzer erwarten, dass ihre Theme-Wahl gespeichert wird. Hier ist eine vollständige Lösung, die Einstellungen speichert und gleichzeitig Systemstandards respektiert:

// Prüfe auf gespeicherte Einstellung oder verwende Systemeinstellung als Standard
function getThemePreference() {
  const savedTheme = localStorage.getItem('theme');
  if (savedTheme) {
    return savedTheme;
  }
  return window.matchMedia('(prefers-color-scheme: dark)').matches 
    ? 'dark' 
    : 'light';
}

// Theme beim Laden anwenden
function applyTheme(theme) {
  if (theme === 'dark') {
    document.documentElement.classList.add('dark');
  } else {
    document.documentElement.classList.remove('dark');
  }
}

// Theme initialisieren
applyTheme(getThemePreference());

// Theme-Umschaltfunktion
function toggleTheme() {
  const currentTheme = document.documentElement.classList.contains('dark') 
    ? 'dark' 
    : 'light';
  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
  
  applyTheme(newTheme);
  localStorage.setItem('theme', newTheme);
}

Um ein Aufblitzen des falschen Themes beim Laden der Seite zu verhindern, fügen Sie dieses Inline-Skript zu Ihrem <head> hinzu:

<script>
  // FOUC (Flash of Unstyled Content) verhindern
  if (localStorage.theme === 'dark' || 
      (!localStorage.theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    document.documentElement.classList.add('dark');
  }
</script>

Best Practices für Dark Mode mit Tailwind

Performance: Platzieren Sie Theme-Erkennungsskripte im <head>, um Layout-Verschiebungen zu verhindern. Das obige Inline-Skript wird vor dem Rendern der Seite ausgeführt.

Barrierefreiheit: Stellen Sie ausreichenden Farbkontrast in beiden Themes sicher. Dark Mode bedeutet nicht nur Farben umzukehren – erhalten Sie die Lesbarkeit mit angemessenen Kontrastverhältnissen (WCAG AA-Standard empfiehlt 4,5:1 für normalen Text).

Testen: Testen Sie immer beide Themes während der Entwicklung. Verwenden Sie die Browser-DevTools, um prefers-color-scheme schnell umzuschalten, ohne Systemeinstellungen zu ändern.

Farbkonsistenz: Verwenden Sie Tailwinds Farbpalette systematisch. Wenn Sie beispielsweise gray-100 für helle Hintergründe verwenden, ziehen Sie gray-800 oder gray-900 für Dark Mode-Äquivalente in Betracht.

Fazit

Die Implementierung von Dark Mode mit Tailwind CSS erfordert minimalen Code und keine externen Abhängigkeiten. Ob Sie sich für systemgesteuerten oder manuellen Umschalter entscheiden, die dark-Variante macht theme-bewusstes Styling unkompliziert. Beginnen Sie mit automatischem Dark Mode für Einfachheit und fügen Sie dann manuelle Steuerelemente hinzu, wenn Nutzer mehr Kontrolle über ihre Anzeigeerfahrung benötigen.

Häufig gestellte Fragen

Ja, Sie können einen dreistufigen Umschalter implementieren, der Hell-, Dunkel- und System-Optionen bietet. Speichern Sie die Nutzerauswahl in localStorage und prüfen Sie, ob sie den System-Modus gewählt haben, um OS-Einstellungen zu respektieren.

Verwenden Sie CSS-Filter für einfache Anpassungen oder stellen Sie alternative Bildquellen bereit. Für Icons sollten Sie currentColor in SVGs verwenden, damit sie die Textfarbe erben, oder Deckkraft-Anpassungen mit Tailwind-Utilities anwenden.

Absolut. Die dark-Variante funktioniert mit jedem Tailwind-Utility, einschließlich benutzerdefinierter Farben, die in Ihrer Konfiguration definiert sind. Setzen Sie einfach dark: vor jede Klasse, um sie bedingt im Dark Mode anzuwenden.

Minimal. Die dark-Variante fügt nur CSS-Regeln hinzu, keinen JavaScript-Overhead. Die Hauptüberlegung ist die Verhinderung von Flash of Unstyled Content durch frühes Laden von Theme-Erkennungsskripten im Document-Head.

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.