Zusammenfassung

In dieser Lektion haben wir der Seite des Tierheims eine dunkle Version gegeben und gelernt:

• Die Variante dark: wendet eine Klasse nur im Dark Mode an: bg-stone-50 dark:bg-stone-900.
• Standardmäßig folgt dark: der Einstellung des Betriebssystems (die Regel @media (prefers-color-scheme: dark)).
• Mit der Zeile @custom-variant dark (&:where(.dark, .dark *)); nach dem Import in style.css ist der Dark Mode an, wenn <html> die Klasse dark hat. So funktionieren Websites mit einem Dark-Mode-Schalter: Ein Skript fügt die Klasse hinzu oder entfernt sie.
• Jede Farbe bekommt einen Partner für den Dark Mode: Hintergründe wandern von hellen zu dunklen Abstufungen und Text andersherum, Karten sind eine Stufe heller als die Seite, gedämpfter Text ist stone-400, Rahmen stone-700, und die Hauptfarbe der Website bekommt eine hellere Abstufung (orange-400).
• Der Opacity-Modifier funktioniert auch mit dark:: bg-white/90 dark:bg-stone-900/90. Ein durchscheinender Farbton wie dark:bg-emerald-500/20 passt zu Abzeichen auf Dunkel.
• Schatten sind auf Dunkel kaum zu sehen: Ein hellerer Hintergrund und ein dünner Rahmen (dark:border dark:border-stone-700) wirken besser.
• Varianten lassen sich kombinieren: dark:hover:text-orange-400.
• Mit dark:hidden und hidden dark:inline zeigt jeder Modus anderen Inhalt.

In der nächsten Lektion, dem Anpassen von Tailwind, fügst du Tailwind eigene Farben und Schriften hinzu und lernst, wie du dieselben Klassen nicht wiederholen musst.

Zum Üben: Hier ist die Kontaktkarte des Tierheims, bisher nur hell. Gib ihr eine dunkle Version.