Dark Mode und die Fußzeile

Die Seite ist komplett, in hellen Farben. Jetzt kommt ihre dunkle Version und zum Schluss die Fußzeile.

Zur Erinnerung, wie der Dark Mode auf dieser Seite funktioniert: style.css hat die Zeile @custom-variant dark (&:where(.dark, .dark *));, deshalb gelten Klassen mit dark:, wenn das Element html die Klasse dark hat. Der Button 🌙 in der Kopfzeile fügt sie mit dem kleinen Skript am Ende der Seite hinzu und entfernt sie wieder. Klicke in der Vorschau darauf und prüfe deine dunkle Version laufend.

Farbpaare. Jeder helle Hintergrund bekommt einen dunklen und jeder dunkle Text einen hellen: zum Beispiel bg-white dark:bg-stone-800 für Boxen auf einer Seite mit dark:bg-stone-900 und text-stone-600 dark:text-stone-300 für gedämpfte Texte.
Schatten sind auf einem dunklen Hintergrund schwer zu sehen. Boxen heben sich stattdessen durch einen helleren Hintergrund ab.
Hellere Töne der Hauptfarbe lesen sich auf dunklen Hintergründen besser, zum Beispiel dark:text-marke-400 für das Logo. Orange Buttons mit weißem Text können bleiben, wie sie sind.
Halbtransparente Hintergründe bleiben halbtransparent: dark:bg-stone-900/90.

Die Prüfungen schalten die Seite von selbst in den Dark Mode: Für einen Moment fügen sie html die Klasse dark hinzu, vergleichen die Farben und entfernen sie dann wieder.

Anweisungen

Gib body im Dark Mode einen dunklen Hintergrund und eine helle Textfarbe, zum Beispiel dark:bg-stone-900 dark:text-stone-100.
Gib jedem Element mit einem hellen Hintergrund im Dark Mode einen dunklen: der Kopfzeile, dem Hero, den Karten der Katzen, den Schritten, beiden Boxen im Kontakt, dem Button 🌙 und allem anderen, dem du einen hellen Hintergrund gegeben hast. Die Formularfelder kommen als Nächstes. Mach auch die gedämpften Texte heller.
Gib auch den Formularfeldern im Dark Mode einen dunklen Hintergrund, zum Beispiel dark:bg-stone-900, und einen dunkleren Rahmen, zum Beispiel dark:border-stone-600.
Zum Schluss die Fußzeile: Gib ihr Padding und eine Hintergrundfarbe oder eine Linie oben (border-t), die sie von der Seite abhebt, zum Beispiel bg-stone-800 px-4 py-10 text-center text-sm text-stone-300. Prüfe sie in beiden Modi.

ZurückWeiter

Dark Mode und die Fußzeile

Die Seite ist komplett, in hellen Farben. Jetzt kommt ihre dunkle Version und zum Schluss die Fußzeile.

Farbpaare. Jeder helle Hintergrund bekommt einen dunklen und jeder dunkle Text einen hellen: zum Beispiel bg-white dark:bg-stone-800 für Boxen auf einer Seite mit dark:bg-stone-900 und text-stone-600 dark:text-stone-300 für gedämpfte Texte.
Schatten sind auf einem dunklen Hintergrund schwer zu sehen. Boxen heben sich stattdessen durch einen helleren Hintergrund ab.
Hellere Töne der Hauptfarbe lesen sich auf dunklen Hintergründen besser, zum Beispiel dark:text-marke-400 für das Logo. Orange Buttons mit weißem Text können bleiben, wie sie sind.
Halbtransparente Hintergründe bleiben halbtransparent: dark:bg-stone-900/90.

Die Prüfungen schalten die Seite von selbst in den Dark Mode: Für einen Moment fügen sie html die Klasse dark hinzu, vergleichen die Farben und entfernen sie dann wieder.

Anweisungen

Gib body im Dark Mode einen dunklen Hintergrund und eine helle Textfarbe, zum Beispiel dark:bg-stone-900 dark:text-stone-100.

Gib jedem Element mit einem hellen Hintergrund im Dark Mode einen dunklen: der Kopfzeile, dem Hero, den Karten der Katzen, den Schritten, beiden Boxen im Kontakt, dem Button 🌙 und allem anderen, dem du einen hellen Hintergrund gegeben hast. Die Formularfelder kommen als Nächstes. Mach auch die gedämpften Texte heller.

Gib auch den Formularfeldern im Dark Mode einen dunklen Hintergrund, zum Beispiel dark:bg-stone-900, und einen dunkleren Rahmen, zum Beispiel dark:border-stone-600.

Zum Schluss die Fußzeile: Gib ihr Padding und eine Hintergrundfarbe oder eine Linie oben (border-t), die sie von der Seite abhebt, zum Beispiel bg-stone-800 px-4 py-10 text-center text-sm text-stone-300. Prüfe sie in beiden Modi.