Die Variante dark:

Viele Leute stellen ihr Smartphone oder ihren Computer auf den Dark Mode um: überall dunkle Hintergründe und helle Schrift. In einem dunklen Raum ist er angenehmer für die Augen, und viele mögen ihn einfach lieber. Immer mehr Websites haben auch eine dunkle Version, und in dieser Lektion bekommt die Website unseres Tierheims eine.

Wir haben eine kleinere Version der Startseite vorbereitet: eine Kopfzeile, die Hauptüberschrift, drei Katzen und eine Fußzeile. Sie ist mit den Klassen aus den vorigen Lektionen gestaltet und bisher nur hell. Am Ende dieser Lektion hat sie eine dunkle Version und einen Button, der zwischen beiden wechselt.

Tailwind hat für den Dark Mode eine Variante: dark:. Sie funktioniert wie hover: und md:. Eine Klasse mit diesem Präfix gilt nur im Dark Mode. Ein Paar von Klassen gibt einem Element für jeden Modus eine Farbe:

<body class="bg-stone-50 dark:bg-stone-900">

Im hellen Modus ist die Seite fast weiß (bg-stone-50). Im Dark Mode gelten beide Klassen, und dark:bg-stone-900 gewinnt: Tailwind setzt das CSS der Varianten hinter die einfachen Klassen, und von zwei gleich spezifischen Regeln gewinnt die spätere (das kennst du von der Kaskade aus dem CSS-Kurs).

Woher weiß der Browser, welcher Modus eingeschaltet ist? Besucher wählen ihn in den Einstellungen ihres Betriebssystems, und eine Seite kann mit einer @media-Regel danach fragen. Standardmäßig packt Tailwind das CSS der dark:-Klassen in eine solche, genau wie bei md:, nur fragt diese nach der Systemeinstellung statt nach der Breite:

@media (prefers-color-scheme: dark) {
	.dark\:bg-stone-900 {
		background-color: oklch(21.6% 0.006 56.043);
	}
}

Das reicht oft. Aber viele Websites lassen die Besucher mit einem Button wählen, egal wie ihr System eingestellt ist, und eine Seite kann die Systemeinstellung nicht ändern. Darum schalten Websites mit einem Schalter den Dark Mode mit einer Klasse ein: Der Dark Mode ist an, wenn das Element <html> die Klasse dark hat. Ein Skript fügt diese Klasse dann nur hinzu oder entfernt sie. Wir machen es genauso. Solange du an der Seite arbeitest, schaltest du den Dark Mode ein und aus, indem du eine einzige Klasse schreibst oder löschst, ohne die Einstellungen deines Computers zu ändern.

Um es Tailwind zu sagen, füge diese Zeile direkt nach dem Import in style.css ein:

@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

@custom-variant definiert eine Variante, hier eine neue Version von dark. In den Klammern steht der Selektor, den sie hinzufügt: & steht für das Element, das die Klasse dark: hat, und :where(.dark, .dark *) bedeutet „das selbst die Klasse dark hat oder in einem Element liegt, das sie hat“ (.dark * ist ein Nachfahrenselektor, wie du ihn aus dem CSS-Kurs kennst). dark:bg-stone-900 erzeugt dann diese Regel:

.dark\:bg-stone-900:where(.dark, .dark *) {
	background-color: oklch(21.6% 0.006 56.043);
}

Jedes Element der Seite liegt in <html>, darum schaltet class="dark" darauf den Dark Mode für die ganze Seite ein. Du musst die Zeile nicht auswendig lernen: Du findest sie in der Dokumentation von Tailwind (suche nach „dark mode“).

Die Klasse dark gestaltet selbst nichts: Sie ist nur ein Signal für die dark:-Klassen. Und Vorsicht bei Tippfehlern: Mit class="drak" passiert nichts, und es erscheint keine Fehlermeldung.