Dark- und Light-Modus in einer Webseite automatisch erkennen und steuern

Einleitung

Moderne Webseiten bieten ihren Nutzern die Möglichkeit, zwischen einem Dark- und Light-Modus zu wechseln. Doch wie kann man den Standardmodus intelligent setzen? In diesem Beitrag zeigen wir verschiedene Methoden, um den bevorzugten Modus des Systems auszulesen und eine Webseite automatisch daran anzupassen.

Dark- und Light-Modus in einer Webseite automatisch erkennen und steuern

Warum Dark- und Light-Modus unterstützen?

Viele Betriebssysteme und Browser unterstützen mittlerweile einen systemweiten Dark- oder Light-Modus. Nutzer schalten diesen oft ein, um ihre Augen zu schonen oder einfach eine ansprechendere Darstellung zu haben. Eine Webseite sollte sich idealerweise an diese Präferenzen anpassen, anstatt immer mit einem festen Design zu starten.

Erkennt der Browser die System- oder Browser-Einstellung?

Der Dark-Mode wird von den meisten Browsern nicht eigenständig verwaltet, sondern direkt aus der System-Einstellung übernommen.

Das bedeutet:

Wenn du unter Windows, macOS, Linux oder mobilen Geräten das Design auf “Dunkel” stellst, erkennt der Browser das über window.matchMedia("(prefers-color-scheme: dark)").
In den meisten Fällen gibt es keine separate Einstellung im Browser, sondern nur die systemweite Vorgabe.

Ausnahmen & Besonderheiten

Firefox: Hier kann man den Dark-Mode unabhängig vom System über about:config (ui.systemUsesDarkTheme) festlegen.
Chrome & Edge: Folgen standardmäßig der System-Einstellung, es sei denn, man aktiviert spezielle Flags oder Erweiterungen.
Safari (macOS & iOS): Nutzt immer die macOS/iOS-Systemeinstellung.

Falls du testen willst, kannst du in der Entwicklerkonsole (F12 → Konsole) folgenden Code eingeben:

console.log(window.matchMedia("(prefers-color-scheme: dark)").matches);

Das gibt true für Dark-Mode und false für Light-Mode zurück, basierend auf der System-Einstellung.

1. Lösung mit reinem CSS (einfachste Methode)

Die einfachste Möglichkeit ist die Nutzung von CSS @media-Abfragen:

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

Hier prüft der Browser automatisch die System-Einstellung und setzt das Design entsprechend um. Der Nachteil: Der Nutzer kann das Design nicht manuell umstellen.

2. Lösung mit JavaScript (dynamisch anpassen)

Falls du JavaScript nutzen möchtest, um den Modus dynamisch zu erkennen und anzupassen, kannst du folgende Methode verwenden:

const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
console.log(isDarkMode ? "Dark Mode" : "Light Mode");

Willst du auf Änderungen der Systemeinstellung reagieren, kannst du einen Event Listener hinzufügen:

window
  .matchMedia("(prefers-color-scheme: dark)")
  .addEventListener("change", (event) => {
    if (event.matches) {
      document.documentElement.classList.add("dark");
    } else {
      document.documentElement.classList.remove("dark");
    }
  });

Diese Methode sorgt dafür, dass die Webseite automatisch wechselt, wenn der Nutzer in den Systemeinstellungen das Design ändert.

3. Dark- und Light-Modus mit Speicherung (localStorage)

Um zu verhindern, dass der Nutzer jedes Mal den Modus erneut einstellen muss, kann man den Zustand im localStorage speichern:

const toggleTheme = () => {
  const currentTheme = document.documentElement.classList.contains("dark")
    ? "light"
    : "dark";
  document.documentElement.classList.toggle("dark");
  localStorage.setItem("theme", currentTheme);
};

Hier kann der Nutzer über einen Button das Design umschalten, und die Wahl wird gespeichert. Allerdings startet die Seite immer in Light-Mode, wenn keine Voreinstellung existiert.

4. Standardmodus an das System anpassen

Falls du möchtest, dass die Webseite beim ersten Laden den Systemmodus übernimmt, kannst du den localStorage mit der System-Einstellung kombinieren:

// Prüfe, ob eine Präferenz gespeichert ist
const savedTheme = localStorage.getItem("theme");

if (savedTheme) {
  document.documentElement.classList.toggle("dark", savedTheme === "dark");
} else {
  // Falls keine Präferenz gespeichert wurde, das System-Theme als Standard setzen
  const systemPrefersDark = window.matchMedia(
    "(prefers-color-scheme: dark)"
  ).matches;
  document.documentElement.classList.toggle("dark", systemPrefersDark);
}

Diese Lösung kombiniert die besten Ansätze:

Falls der Nutzer eine eigene Wahl getroffen hat, bleibt sie erhalten.
Falls keine Wahl existiert, wird das System-Theme als Standard gesetzt.

5. Dark Mode mit Tailwind CSS (falls du es nutzt)

Falls du Tailwind CSS verwendest, kannst du den Dark Mode über Klassen steuern:

In der tailwind.config.js:

module.exports = {
  darkMode: "class", // oder 'media' für automatische Erkennung
};

Im HTML:

<html class="dark">
  <body class="bg-white dark:bg-gray-900 text-black dark:text-white">
    <h1>Dark Mode unterstützt</h1>
  </body>
</html>

Mit JavaScript kannst du dann zwischen den Modi wechseln:

document.documentElement.classList.toggle("dark");

Fazit

Je nach Anwendungsfall gibt es verschiedene Möglichkeiten, den Dark- oder Light-Modus in eine Webseite zu integrieren. Die einfachste Methode ist @media (prefers-color-scheme: dark) in CSS, aber mit JavaScript kannst du mehr Flexibilität und Benutzerfreundlichkeit hinzufügen. Die beste Lösung ist es, die System-Einstellung als Standard zu setzen und Änderungen im localStorage zu speichern. So haben deine Nutzer das beste Erlebnis!