Dark und Light Mode gehören inzwischen bei vielen Websites und Apps ganz selbstverständlich dazu. Manche Menschen bevorzugen dunkle Oberflächen, andere helle, und manchmal hängt es schlicht davon ab, ob man gerade mittags am Schreibtisch sitzt oder nachts noch auf einen Bildschirm schaut.

Technisch klingt der Wechsel zunächst ziemlich einfach: zwei Farbschemata definieren, einen Schalter einbauen und fertig.

Zumindest theoretisch.

Für einen grundlegenden Dark-und-Light-Mode braucht es nämlich weder ein zusätzliches Plugin noch irgendein großes Add-on. Mit CSS-Variablen und ein wenig JavaScript lässt sich das auch selbst umsetzen. Gerade bei solchen überschaubaren Funktionen halte ich zusätzliche Abhängigkeiten gerne klein, wenn sie keinen wirklichen Mehrwert bringen.

Der Schalter selbst ist dabei ohnehin der einfache Teil.

Interessant wird es danach: Farben, Bilder, Kontraste, Komponenten, Formulare und all die kleinen Zustände einer Website müssen plötzlich in zwei Farbwelten funktionieren.

Braucht jede Website einen Dark und Light Mode?

Nein.

Ein zusätzlicher Farbmodus bedeutet auch ein zusätzliches System, das gestaltet, entwickelt und getestet werden muss. Bei einer kleinen Website kann der Aufwand größer sein als der tatsächliche Nutzen.

Ich mag es trotzdem, wenn Menschen auswählen können, wie sie eine Website betrachten möchten. Manche bevorzugen dunkle Oberflächen, andere können damit wenig anfangen. Umgebung, Tageszeit, Display und schlicht persönlicher Geschmack spielen dabei eine Rolle.

Das bedeutet für mich aber nicht, dass die Einstellung des Betriebssystems zwingend die Gestaltung einer Website bestimmen muss.

Wenn eine Website bewusst als dunkles Design konzipiert wurde, darf Dark Mode zunächst der Standard sein. Die ursprüngliche gestalterische Richtung bleibt damit erhalten. Wer lieber die helle Variante nutzt, kann wechseln.

Bei meiner Website ist es genauso: Dark ist der kuratierte Ausgangspunkt. Light ist eine vollwertige Alternative.

Der Schalter ist nicht das Designsystem

Damit beide Varianten gut aussehen, braucht es eine klare Farbstruktur.

Statt konkrete Farben überall einzeln einzutragen, arbeite ich mit semantischen Variablen. Diese beschreiben nicht unbedingt einen bestimmten Farbwert, sondern seine Aufgabe:

:root {
  color-scheme: dark;

  --color-background: #0a0a0a;
  --color-surface: #151515;
  --color-text: #f2f2f2;
  --color-text-muted: #a8a8a8;
  --color-border: #333333;
  --color-accent: #ff5a36;
}

:root[data-theme="light"] {
  color-scheme: light;

  --color-background: #f5f3ef;
  --color-surface: #ffffff;
  --color-text: #171717;
  --color-text-muted: #656565;
  --color-border: #d8d5cf;
  --color-accent: #d93f22;
}

color-scheme informiert den Browser darüber, ob eine helle oder dunkle Darstellung verwendet wird. Dadurch können auch browserseitige Elemente wie Formularfelder oder Scrollbars passend dargestellt werden.

Die eigenen Komponenten greifen wiederum auf die definierten Farbrollen zu:

body {
  background: var(--color-background);
  color: var(--color-text);
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

Ändert sich später eine Farbe, muss ich sie nicht in zwanzig Komponenten suchen, sondern passe die entsprechende Variable zentral an.

Das spart Arbeit.

Es verhindert allerdings nicht, dass ich mir beide Varianten trotzdem ansehen muss.

Light Mode ist kein umgedrehter Dark Mode

Einfach Schwarz und Weiß miteinander zu vertauschen funktioniert technisch. Gestalterisch muss das aber nicht die beste Lösung sein.

Statt reinem Weiß kann beispielsweise ein leicht warmes oder kühles Grau als Hintergrund funktionieren. Auch Text muss nicht zwingend tiefschwarz sein. Ein dunkles Grau kann je nach Gestaltung weicher wirken und trotzdem genügend Kontrast bieten.

Das sind keine festen Regeln. Entscheidend ist, dass die Farben zum restlichen Design passen und die Kontraste stimmen.

Auch Farbverläufe und grafische Elemente sollte man nicht einfach unverändert übernehmen. Auf einem hellen Hintergrund wirken Farben anders, Schatten treten stärker hervor und Elemente, die im Dark Mode wunderbar funktionieren, können plötzlich viel zu dominant oder kaum noch sichtbar sein.

Bilder werden ebenfalls gerne vergessen. Ein dunkles Mockup kann auf schwarzem Hintergrund wunderbar aussehen und im Light Mode plötzlich etwas verloren herumstehen. Logos brauchen möglicherweise unterschiedliche Varianten und selbst Fotografien wirken je nach Umgebung anders.

Am Ende hilft vor allem eines: beide Varianten wirklich ansehen.

Geprüft werden sollten nicht nur Hintergrund und Text, sondern auch Links, Buttons, Formulare, Icons, Bilder, Schatten, Verläufe sowie Hover-, Fokus-, Fehler- und Erfolgszustände.

Barrierefreiheit gibt es leider nicht per Mond-Button

Ein Theme-Schalter macht eine Website nicht automatisch barrierefrei. Beide Varianten müssen weiterhin ausreichend lesbar und bedienbar sein.

Bei normalem Text gilt nach WCAG als wichtiger Richtwert ein Kontrastverhältnis von mindestens 4,5:1. Ein dunkler Hintergrund mit hellgrauer Schrift kann also elegant aussehen und trotzdem zu wenig Kontrast haben. Dasselbe gilt für sehr helle Grautöne im Light Mode.

Am besten prüft man das schon während des Designprozesses. In Figma lassen sich Kontrastwerte direkt bei den Farbeinstellungen kontrollieren. Zusätzlich hilft beispielsweise der WebAIM Contrast Checker.

Auch Farbe allein sollte keine wichtige Information transportieren. Eine Fehlermeldung nur rot einzufärben reicht nicht. Text oder ein zusätzliches Symbol machen den Zustand verständlicher.

Links, Buttons, Formularfelder und sichtbare Fokuszustände müssen ebenfalls in beiden Modi funktionieren.

Barrierefreiheit entsteht also nicht durch den Mond-Button im Header.

Schade eigentlich.

Welcher Modus gilt zuerst?

Grundsätzlich gibt es mehrere Möglichkeiten: Eine Website kann sich nach der Systemeinstellung richten, mit einem festgelegten Farbmodus starten oder die Auswahl direkt den Nutzer überlassen. Etwa ganz spielerisch wie bei einem Videospiel: Bevor die eigentliche Seite erscheint, entscheidet man sich zwischen Hell, Dunkel oder System.

Ich persönlich würde mit dem Farbschema starten, in dem die Website ursprünglich gestaltet wurde. Ist das Design für einen dunklen Hintergrund konzipiert, startet sie also im Dark Mode. Wer lieber die helle Variante möchte, kann jederzeit wechseln.

Diese Auswahl sollte gespeichert werden, zum Beispiel über localStorage, damit man beim nächsten Besuch nicht wieder von vorne anfangen muss.

Auch der Schalter selbst sollte leicht zu finden und verständlich sein. Sonne und Mond haben sich dafür inzwischen ziemlich gut etabliert.

Mehr braucht es aus gestalterischer Sicht eigentlich nicht.

Die technische Umsetzung hängt ohnehin davon ab, womit die Website gebaut wurde.

Testen. Und zwar alles.

Ein Dark-und-Light-Mode ist erst fertig, wenn die Website tatsächlich in beiden Varianten geprüft wurde.

Dazu gehören für mich unter anderem:

  • wichtige Seitentypen und Komponenten

  • Desktop, Tablet und Smartphone

  • Navigation und mobile Menüs

  • Formulare und Meldungen

  • Hover-, Fokus- und aktive Zustände

  • Bilder, Videos und eingebettete Inhalte

  • Bedienung mit der Tastatur

  • erster Besuch und gespeicherte Auswahl

  • der Wechsel während der Nutzung

Wenn der Farbwechsel animiert ist, sollte außerdem berücksichtigt werden, ob Nutzer reduzierte Bewegung bevorzugen.

Zusätzlich prüfe ich, ob beim Laden kurz das falsche Theme erscheint oder sich durch den Wechsel Elemente verschieben.

Ein kurzer Blick auf die Startseite reicht leider nicht.

Irgendwo wartet garantiert noch ein Formularfeld mit weißer Schrift auf weißem Hintergrund.

Fazit

Dark und Light Mode sind ein schönes Feature, wenn beide Varianten bewusst gestaltet wurden und technisch sauber funktionieren.

Nicht jede Website braucht diesen Aufwand. Wenn man zwei Modi anbietet, sollte die zweite Variante aber nicht wie ein nachträglich eingebauter Notfallmodus aussehen.

Ein Farbmodus, der überall gut funktioniert, ist besser als zwei, bei denen einer nur irgendwie mitläuft.