Auf meiner bisherigen WordPress-Website hatte ich bereits einen Schalter für Dark und Light Mode eingebaut. Die Umsetzung war damals relativ überschaubar: CSS-Variablen definieren, einen Button ergänzen, ein wenig JavaScript schreiben und fertig.

Zumindest theoretisch.

Für meine neue Website wollte ich wieder beide Farbmodi anbieten. Dabei wurde schnell klar, dass der Schalter selbst der einfachste Teil ist. Die eigentliche Arbeit steckt in Farben, Bildern, Kontrasten, Komponenten und all den kleinen Zuständen, die in beiden Varianten funktionieren müssen.

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 dieser 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. Der Wechsel kann abhängig von Umgebung, Tageszeit, Display oder schlicht persönlichem Geschmack angenehmer sein.

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

Wenn eine Website bewusst als dunkles Design konzipiert wurde, darf Dark Mode zunächst der Standard sein. Die Gestalterin oder der Gestalter gibt damit die ursprüngliche visuelle Richtung vor. Wer die helle Variante bevorzugt, kann wechseln. Diese Entscheidung sollte anschließend gespeichert werden.

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

Der Schalter ist nicht das Designsystem

Für einen einfachen Theme-Wechsel reichen technisch ein Button, CSS-Variablen und etwas JavaScript. Damit beide Varianten auch gut aussehen, braucht es aber eine klare Farbstruktur.

Statt konkrete Farben überall einzeln einzutragen, arbeite ich mit semantischen Variablen. Diese beschreiben nicht den 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;
}

Die eigentlichen Komponenten greifen anschließend nur noch auf diese Rollen zu:

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

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

.meta {
  color: var(--color-text-muted);
}