Farbpaletten für Dark Mode richtig gestalten
So wählen Sie Farben aus, die in dunklen Umgebungen nicht ermüdend wirken und ein stimmiges Gesamtbild erzeugen.
Artikel lesen
Entwicklung
Theme-Umschalter technisch implementieren
So bauen Sie einen zuverlässigen Dark-Mode-Umschalter mit CSS-Variablen, localStorage und echtem Benutzerkomfort auf.
Warum ein guter Theme-Umschalter wichtig ist
Ein Theme-Umschalter ist mehr als nur ein visueller Spielkram. Es’s die Unterscheidung zwischen einer Website, die sich für jeden anfühlt, und einer, die nur für bestimmte Augen optimiert wurde. Wenn Ihre Nutzer um 23 Uhr mit ihrem Telefon arbeiten, wird ihnen das helle Interface wehtun. Das ist nicht akzeptabel.
Die technische Umsetzung ist überraschend knifflig. Nicht nur müssen die Farben wechseln — Sie müssen sicherstellen, dass die Einstellung gespeichert wird, dass sie auf allen Seiten funktioniert, und dass der Umschalt-Button selbst in beiden Modes lesbar ist. Wir zeigen Ihnen, wie’s richtig gemacht wird.
Die Grundlage: CSS-Variablen richtig nutzen
Das Herzstück eines funktionierenden Theme-Umschalters sind CSS-Variablen. Anstatt überall hardcodierte Farben zu verteilen, definieren Sie zentrale Farbpaletten und referenzieren diese Variablen überall im Code. Das macht Umschalten nicht nur einfach — es macht die gesamte Codebase wartbar.
Sie benötigen zwei Dinge: Ein `[data-theme=”light”]` und ein `[data-theme=”dark”]` Attribut auf dem `html`-Element, dann definieren Sie die Variablen unterschiedlich für jeden Modus. Wenn jemand den Umschalter klickt, ändern Sie einfach dieses Attribut. Boom. Alles andere folgt automatisch.
Das funktioniert, weil CSS-Variablen Cascade-Prinzipien folgen. Wird die Variable in einem parent-Element neu definiert, nutzen alle Kinder die neue Definition. Keine komplizierten Selektoren, keine mehrfachen Regeln — einfach saubere Vererbung.
Schritt-für-Schritt Implementierung
So setzen Sie einen stabilen Theme-Toggle auf
01
HTML-Struktur vorbereiten
Fügen Sie ein `data-theme=”light”` Attribut zum `html`-Element hinzu. Das wird später das Schalter-Element sein. Der Button braucht ein eindeutiges ID-Attribut — nennen Sie es `theme-toggle` oder ähnlich. Nichts Kompliziertes, einfach die Struktur für JavaScript vorbereiten.
02
CSS-Variablen definieren
Erstellen Sie zwei CSS-Regel-Blöcke: eine für `html[data-theme=”light”]` und eine für `html[data-theme=”dark”]`. In jedem Block definieren Sie die gleichen Variablen mit unterschiedlichen Werten. `–color-bg` könnte #ffffff im Light-Modus sein und #0f172a im Dark-Modus. Das ist alles, was Sie brauchen.
03
JavaScript-Toggle implementieren
Schreiben Sie eine Funktion, die das `data-theme` Attribut zwischen “light” und “dark” wechselt. Speichern Sie die Auswahl im localStorage, damit sie beim nächsten Besuch erhalten bleibt. Das ist keine Raketenwissenschaft — vier bis fünf Zeilen Code, die aber entscheidend sind.
04
Systemeinstellungen respektieren
Nutzen Sie `prefers-color-scheme` Media Query, um zu erkennen, welchen Mode der Benutzer im Betriebssystem eingestellt hat. Wenn kein localStorage-Wert existiert, passen Sie sich an die Systemeinstellung an. Das ist elegant und respektiert echte Benutzerpreferenzen.
Kontrast und Lesbarkeit nicht vergessen
Das häufigste Problem bei Theme-Umschaltern: Die Entwickler wechseln die Farben, aber nicht die Kontraste. Ein helles Grau auf dunklem Hintergrund könnte 5:1 Kontrast haben. Das gleiche Grau auf hellem Hintergrund? Möglicherweise 3:1. Nicht ausreichend nach WCAG-Standards.
Testen Sie die Kontrastverhältnisse in beiden Modes. Nutzen Sie Tools wie WebAIM Contrast Checker. Für regulären Text sollten Sie mindestens 4.5:1 anstreben. Für größere Überschriften genügt 3:1. Diese Zahlen sind nicht optional — sie bestimmen, ob Ihre Website für Menschen mit Sehschwächen nutzbar ist.
Ein Trick: Definieren Sie nicht nur die Hintergrund- und Textfarbe, sondern auch die Fokus-Farbe, die Hover-Zustände und die Border-Farben separat. Ein dunkelgrauer Border auf dunklem Hintergrund ist unsichtbar. Passen Sie diese Details an, und Sie werden einen stabilen, barrierefreien Toggle haben.
Die Details, die den Unterschied machen
Ein guter Theme-Umschalter denkt an die kleinen Dinge. Das Button-Icon sollte sich nicht nur ändern, wenn der Mode sich ändert — es sollte bereits das richtige Icon zeigen, wenn die Seite lädt. Wenn Sie warten, bis JavaScript ausgeführt wird, um das Icon zu zeigen, sehen die Nutzer kurz das falsche Icon. Das ist unhöflich.
Verwenden Sie CSS, um verschiedene Icons für verschiedene Zustände anzuzeigen. `html[data-theme=”light”] .icon-moon { display: none; }` und `html[data-theme=”dark”] .icon-sun { display: none; }` — so ist das richtige Icon immer sichtbar, bevor JavaScript lädt.
Auch Bilder verdienen Aufmerksamkeit. Ein weißes Logo auf dunklem Hintergrund ist elegant. Das gleiche Logo auf hellem Hintergrund ist unsichtbar. Nutzen Sie `
“Die besten Theme-Umschalter sind unsichtbar. Der Benutzer aktiviert sie einmal, und dann funktioniert alles einfach richtig in seinem bevorzugten Mode.”
— Design-Best-Practice
Testen Sie gründlich
Was könnte schiefgehen und wie Sie es vermeiden
Flash of Wrong Theme
Wenn Sie auf localStorage verlassen und das vor CSS lädt, flackert kurz das falsche Theme. Lösung: Schreiben Sie ein Inline-Script vor dem CSS, das localStorage liest und das richtige `data-theme` sofort setzt.
CSS-Übergänge beim Laden
Wenn Sie `transition: background-color 0.3s` auf alles anwenden, animiert auch der Seiten-Load. Das ist seltsam. Nutzen Sie eine Klasse wie `theme-transitioning`, die Sie nur beim echten Toggle hinzufügen.
SVG und Icon-Farben
SVGs, die mit `fill=”currentColor”` definiert sind, passen sich automatisch an. Das ist praktisch. Inline-SVGs, die `fill=”#ffffff”` hardcodiert haben, nicht. Verwenden Sie currentColor, wo möglich.
Fokus- und Hover-Zustände
Der Fokus-Ring muss in beiden Modes sichtbar sein. Das erfordert oft verschiedene Farben. Definieren Sie `–color-focus-ring` separat für jeden Mode.
Zusammengefasst: Der richtige Weg
Ein zuverlässiger Theme-Umschalter ist kein Luxus — es’s ein Zeichen von Sorgfalt. Es bedeutet, dass Sie erkannt haben, dass nicht alle Menschen unter den gleichen Bedingungen arbeiten. Manche sind nachts online, manche haben Sehbeeinträchtigungen, manche haben einfach eine Systemeinstellung für Dark Mode, die Sie respektieren sollten.
Mit CSS-Variablen, localStorage und der `prefers-color-scheme` Media Query haben Sie alle Werkzeuge. Beginnen Sie mit den Grundlagen, testen Sie die Kontraste, und vergessen Sie nicht die kleinen Details wie Icon-Übergänge und Bild-Varianten. Der Code ist überraschend einfach. Die Sorgfalt macht den Unterschied.
Tiefer einsteigen
Erkunden Sie verwandte Themen wie Farbpaletten-Design, WCAG-Kontrast-Standards und Icon-Anpassungen zwischen Themes.
Weitere Artikel lesen
Hinweis zum Artikel
Dieser Artikel bietet technische Anleitungen zur Implementierung von Theme-Umschaltern. Die hier beschriebenen Methoden basieren auf bewährten Web-Standards und Best Practices. Ihre konkrete Implementierung kann je nach Projekt-Anforderungen, Browser-Kompatibilität und bestehender Code-Architektur abweichen. Testen Sie alle Funktionen gründlich in Ihrem spezifischen Kontext.