Darkmode aktiv
Theme Toggle (Dark Mode)
Ein Theme Toggle lässt Nutzer zwischen einem hellen und einem dunklen Erscheinungsbild der Website wechseln – oft als Dark Mode bezeichnet. Technisch steuerst du das mit CSS-Variablen, einem Attribut am <html>-Element und etwas JavaScript.
Auf dieser Website findest du den Schalter oben rechts in der Navigation. In diesem Kapitel siehst du, wie so ein Toggle grundsätzlich funktioniert.
HTML – Schalter-Button
Du brauchst einen klickbaren Button. Mit aria-label beschreibst du die Funktion für Screenreader – besonders wichtig, wenn du nur ein Icon statt Text anzeigst.
HTML – Theme-Button
1<button id="themeBtn" type="button" aria-label="Theme wechseln">
2 Theme wechseln
3</button>CSS – Light- und Darkmode
Statt für jedes Element einzeln Farben zu ändern, definierst du CSS Custom Properties (Variablen). Am <html>-Element setzt du data-theme="dark" oder data-theme="light" – je nach aktivem Modus greifen die passenden Variablen.
CSS – Themes mit data-theme
1:root,
2html[data-theme="dark"] {
3 --bg: #161b22;
4 --text: #ecf0f1;
5}
6
7html[data-theme="light"] {
8 --bg: #ffffff;
9 --text: #2c3e50;
10}
11
12body {
13 background-color: var(--bg);
14 color: var(--text);
15 transition: background-color 0.25s ease, color 0.25s ease;
16}Alle Elemente, die var(--bg) und var(--text) nutzen, passen sich automatisch an, sobald sich data-theme ändert.
JavaScript – Theme wechseln und speichern
Beim Klick liest JavaScript das aktuelle Theme aus, schaltet auf das andere um und speichert die Wahl in localStorage. Beim Laden der Seite wird das gespeicherte Theme wiederhergestellt.
Theme umschalten und merken
1const themeBtn = document.getElementById("themeBtn");
2
3function setTheme(theme) {
4 document.documentElement.dataset.theme = theme;
5 localStorage.setItem("theme", theme);
6}
7
8function toggleTheme() {
9 const current = document.documentElement.dataset.theme;
10 const next = current === "light" ? "dark" : "light";
11 setTheme(next);
12}
13
14const savedTheme = localStorage.getItem("theme") || "dark";
15setTheme(savedTheme);
16
17themeBtn.addEventListener("click", toggleTheme);Ausgabe
Tipp: Setze das Theme möglichst früh beim Laden – z. B. mit einem kleinen Script im <head> – damit die Seite nicht kurz im falschen Modus aufblitzt.
Im nächsten Kapitel lernst du: Asynchronität (Einführung)