Farben für das Dunkle

Eine dunkle Version sind nicht einfach die umgedrehten Farben. Für jede Farbe auf der Seite wählst du einen Partner für den Dark Mode, du bekommst also ein Paar von Klassen: eine ohne Präfix und eine mit dark:. Die Palette macht es leicht, denn jede Farbe hat Abstufungen von 50 (die hellste) bis 950 (die dunkelste):

• Hintergründe wandern vom hellen Ende der Skala zum dunklen: die Seite von bg-stone-50 zu dark:bg-stone-900.
• Text geht den anderen Weg: von text-stone-800 zu dark:text-stone-100.
• Flächen, die sich von der Seite abheben, etwa Karten, sind in beiden Modi heller als die Seite: Weiß auf stone-50 und stone-800 auf stone-900. Was heller ist, wirkt näher, als fiele Licht darauf.
• Gedämpfter Text, etwa die Beschreibungen der Katzen, ist ein mittleres Grau: stone-500 im hellen Modus und eine Stufe heller, stone-400, im dunklen, wo ein mittleres Grau schwerer zu lesen wäre.
• Rahmen sollten sich vom Hintergrund nur wenig unterscheiden: stone-200 im hellen Modus, stone-700 im dunklen.
• Die Hauptfarbe der Website: Oranger Text in orange-600 liest sich auf Weiß gut, ist aber auf einem dunklen Hintergrund zu dunkel. Eine hellere Abstufung, orange-400, hebt sich besser ab. Unser oranger Button mit weißem Text funktioniert in beiden Modi und kann bleiben, wie er ist.

Die Kopfzeile hat bg-white/90: Weiß mit 90 %, damit der Inhalt, der unter der fixierten Kopfzeile (sticky) durchscrollt, ein wenig durchscheint. Ihr Partner im Dark Mode behält die Transparenz: dark:bg-stone-900/90.

Es gibt drei Karten, du schreibst also manche Klassen dreimal. Das ist bei Tailwind normal; in der nächsten Lektion siehst du, wie du dieselben Klassen nicht wiederholen musst.

Ein typischer Fehler ist, das Präfix zu vergessen: Mit bg-stone-800 statt dark:bg-stone-800 würden die Karten auch im hellen Modus dunkel. Sieh dir also nach jeder Änderung auch die helle Version an: Lösche kurz die Klasse dark aus <html>, führe den Code aus und setze die Klasse dann wieder ein.