Dark and Light Mode für eine Website

Webseiten mit Dark-and-Light-Mode-Funktionen liegen gerade total im Trend. Es geht um diese magischen kleinen Buttons irgendwo am Rand einer Website, mit denen man zwischen Hell- und Dunkelmodus wechseln kann.

Dieser Button – bzw. der Dark- und Light-Mode – hat schon seit einigen Jahren meine Aufmerksamkeit auf sich gezogen, aber ich habe mir nie die Zeit genommen, die Funktion genauer zu testen – bis jetzt. Da sie immer öfter auftauchen und Barrierefreiheit zunehmend ein Thema wird, habe ich beschlossen, diese Funktion auch auf meiner eigenen Website umzusetzen. Hier ist eine kleine Geschichte dazu – inklusive Tutorial.

Der Gar-Nicht-Mal-So-Neue-Trend

Spannenderweise ist der Dark Mode eigentlich gar nicht so „neu“. In den frühen Computerzeiten waren dunkle Bildschirme mit heller Schrift ganz normal – einfach, weil die Technik nichts anderes hergab. Erst später, mit modernen Betriebssystemen wie Windows und macOS, setzte sich der helle Light Mode als Standard durch, weil er freundlicher und „papierähnlicher“ wirkte.

Richtig Trend wurde der Dark Mode aber erst in den letzten Jahren. Mit OLED-Displays, längeren Bildschirmzeiten und dem Wunsch nach mehr Komfort haben Apple, Google & Co einen systemweiten Dark Mode eingeführt – und ab da wollten ihn plötzlich alle haben. Seitdem gehört der kleine Hell-Dunkel-Schalter fast schon zur Grundausstattung moderner Webseiten.

Wie mache ich das nun?

Da es inzwischen bei modernen Webseiten fast schon Standard ist, diese Funktion anzubieten, gibt es für viele Page-Builder entsprechende Plugins. Ich habe mich jedoch entschieden, auf meiner WordPress-Seite keine zusätzlichen Plugins nur für diesen Zweck zu verwenden. Plugins produzieren oft unnötigen Code, und außerdem wollte ich dabei gleich etwas Webprogrammierung lernen.

Nach ein paar Tagen Recherche habe ich beschlossen, die Funktion selbst einzubauen. Die Farben meiner Seite sind ohnehin sehr simpel gehalten – hauptsächlich Weiß und Schwarz mit ein paar Abstufungen – und das hat die Umsetzung deutlich erleichtert. Ich könnte das alles noch mit sanften Übergängen oder Animationen aufpeppen, aber fürs Erste reicht es völlig.

Bevor ich zu meinem Tutorial komme, fasse ich das kurz zusammen: Damit der Dark-/Light-Mode funktioniert, brauchen wir im Grunde drei Dinge:

1. Sauberes CSS mit klar definierten Anweisungen für Light- und Dark-Mode
2. Einen Button als Auslöser
3. Ein kleines JavaScript, das die Funktion aktiviert

Vorbereitung: Farben und Klassen

Damit der Dark-/Light-Mode sauber funktioniert, solltest du eine klare Farbstruktur auf deiner Website haben. Am einfachsten geht das über CSS-Variablen, die zentral definiert werden:

/* Standard: Light Mode */
:root {
  --bg-color: #ffffff;       /* Hintergrund */
  --text-color: #000000;     /* Textfarbe */
  --link-color: #1a0dab;     /* Linkfarbe */
}

/* Dark Mode */
html.dark {
  --bg-color: #000000;
  --text-color: #ffffff;
  --link-color: #4e9af1;
}

/* Anwendung der Variablen */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

a {
  color: var(--link-color);
}

Vorteile:

• Einfach erweiterbar für Buttons, Header, Footer usw.
• Du musst nicht für jedes Element separate .dark und .light Klassen schreiben.
• Alles, was die Variablen nutzt, passt sich automatisch an.

Der Toggle-Button

Um den Modus von hell auf dunkel zu wechseln (oder umgekehrt), brauchst du einen Button oder ein Icon. Dieses platzierst du idealerweise im Header, damit es seitenweit wirkt. Wichtig ist, dass das Element eine ID erhält, z. B. #theme-toggle.

Die Idee dahinter: Klick auf den Button → die Seite tauscht ihre Farbmodi.
Ganz wichtig: Die ID muss mit dem JavaScript übereinstimmen.

<button id="theme-toggle">Dark Mode / Light Mode</button>

JavaScript für den Modus-Wechsel

Dieses Skript prüft zunächst, ob der User bereits eine Einstellung gespeichert hat, wechselt beim Klick zwischen Dark/Light Mode und speichert die Einstellung dauerhaft. Ich empfehle dir diese Script im Footer einzubinden, damit der Code erst später lädt und die Lade-Zeiten der Website somit nicht blockiert.

<script>
document.addEventListener("DOMContentLoaded", function () {
  const html = document.documentElement;
  const toggleBtn = document.getElementById("theme-toggle");

  // Prüfen, ob User schon eine Einstellung gespeichert hat
  const savedTheme = localStorage.getItem("theme");
  if (savedTheme) {
    html.classList.add(savedTheme);
  } else {
    html.classList.add("light"); // Standard
  }

  // Toggle beim Klick
  toggleBtn.addEventListener("click", () => {
    if (html.classList.contains("light")) {
      html.classList.remove("light");
      html.classList.add("dark");
      localStorage.setItem("theme", "dark");
    } else {
      html.classList.remove("dark");
      html.classList.add("light");
      localStorage.setItem("theme", "light");
    }
  });
});
</script>

Was der Code macht:

• Wechselt beim Klick zwischen .dark und .light.
• Die Dark-Light-Einstellung wird gespeichert und beim nächsten Besuch wiederhergestellt.
• Der Code ist sehr flexibel, erweiterbar und funktioniert bei fast jeder Website und System.

Tipps zur Umsetzung

Icons und Logos:
Verwende am besten SVGs mit currentColor, damit die Farbe automatisch zum Text passt und sich dynamisch mit dem Dark-/Light-Mode ändert. Alternativ kannst du zwei PNGs verwenden – eines für Light Mode und eines für Dark Mode – und diese je nach Modus ein- oder ausblenden.

Header-Layout:
Stelle sicher, dass der Toggle-Button gut sichtbar ist, z. B. rechts neben dem Menü oder Logo.

• Desktop: Logo links, Menü + Toggle rechts
• Mobile: Menü ins Dropdown, Toggle und wichtige Icons sichtbar lassen
  Verwende Flexbox oder Grid, um alles sauber auszurichten und vertikal zu zentrieren.

Fazit

Mit ein paar sauberen CSS-Variablen, einem kleinen JavaScript-Snippet und einer klaren Struktur lässt sich ein professioneller Dark-/Light-Mode-Toggle umsetzen. Das hier ist das Grundgerüst – man kann die Funktion beliebig erweitern, z. B. mit Animationen oder einem schicken Schieberegler.

Unser selbst gebastelter Dark-/Light-Mode-Switcher funktioniert auf allen Geräten, speichert die Nutzereinstellungen und besteht aus minimalem Code.

Dark-Light-Mode ist jetzt zwar eine Art „Nice-to-have“ Feature, sollte meiner Meinung nach aber bald ein Standard sein – jedes Website-Bausystem oder Theme sollte diese Funktion bereits integriert haben. Der User hat so die Wahl, wie er die Seite betrachten möchte. Es ist generell ein sehr nützliches Feature, unterstützt die Barrierefreiheit und spart bei OLED-Displays Energie.