Dark Mode ist längst kein Gimmick mehr – es ist Standard. Viele User erwarten ihn. Doch wie lässt sich ein funktionierender Dark Mode Toggle in ein WordPress-Setup integrieren, das auf dem Gutenberg-Editor und dem GreenShift-Blocksystem basiert?
In diesem Beitrag zeige ich, wie du mit minimalem JavaScript und etwas CSS einen performanten und sauberen Dark Mode Toggle in dein WordPress-Theme einbaust.
Was brauchen wir alles?
Wir benötigen irgendeinen Schalter oder Button, der zwischen den Zuständen „hell“ und „dunkel“ umschaltet – sei es ein Button, ein Toggle oder eine Checkbox. Die Logik dahinter übernimmt JavaScript: Es erkennt beim Laden, welches Theme zuletzt verwendet wurde, und setzt es automatisch. Beim Klick wird das Theme gewechselt und die Wahl dauerhaft im localStorage gespeichert.
Die visuelle Darstellung übernimmt komplett CSS – und zwar über:
- ein zentrales
data-theme="dark"-Attribut - CSS-Variablen für Farben und Gestaltung
- optional:
prefers-color-scheme, um das System-Theme zu übernehmen
Button erstellen
Wir starten mit einem simplen Button, der als Auslöser für den Dark Mode Toggle dient. Wichtig: Der Button bekommt die Klasse .darkmode-toggle, damit unser JavaScript später darauf zugreifen kann.
<button class="darkmode-toggle">
Dark Mode umschalten</button>Natürlich kann man hier auch z.B. eine Checkbox verwenden – letztlich bleibt die Klasse entscheidend des funktionalität.
CSS-Variablen und data-theme
Jetzt kümmern wir uns um die Farblogik hinter dem Dark Mode.
Statt überall manuell Klassen wie .darkmode .button, .darkmode .nav usw. zu pflegen, setzen wir auf zentrale CSS-Variablen, die je nach Theme automatisch überschrieben werden.
:root {
--bg-color: #ffffff;
--text-color: #000000;
}
[data-theme="dark"] {
--bg-color: #1e1e1e;
--text-color: #ffffff;
}Alle Elemente, die var(--bg-color) oder var(--text-color) nutzen, passen sich automatisch dem aktiven Theme an
Styling mit CSS-Variablen
Um den Dark Mode überhaupt sichtbar zu machen, müssen wir unsere HTML-Elemente mit CSS-Variablen gestalten. Statt feste Farben zu setzen, nutzen wir Variablen wie --bg-color und --text-color. Diese lassen sich später zentral ändern – je nachdem, ob das Theme auf „light“ oder „dark“ steht.
Als Beispiel stylen wir hier das body Element:
body {
background-color: var(--bg-color);
color: var(--text-color);
font-family: sans-serif;
transition: background-color 0.3s ease, color 0.3s ease;
}Und natürlich nutzt der Button ebenfalls die Variablen, damit er im Light- und Darkmode gut aussieht:
.darkmode-toggle {
margin: 1rem;
padding: 0.5rem 1rem;
cursor: pointer;
background: none;
border: 2px solid var(--text-color);
color: var(--text-color);
}Dark Mode Toggle mit JavaScript
JavaScript kümmert sich um die Logik. Es prüft beim Laden, ob der User vorher schon ein Theme ausgewählt hat (gespeichert in localStorage), und setzt es entsprechend. Beim Klick auf den Button wechselt das Theme zwischen „dark“ und „light“ und speichert die neue Auswahl wieder ab.
document.addEventListener('DOMContentLoaded', () => {
const toggle = document.querySelector('.darkmode-toggle');
const root = document.documentElement;
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
root.setAttribute('data-theme', savedTheme);
}
toggle.addEventListener('click', () => {
const current = root.getAttribute('data-theme');
const next = current === 'dark' ? 'light' : 'dark';
root.setAttribute('data-theme', next);
localStorage.setItem('theme', next);
});
});
Umsetzung in HTML & CSS
<!DOCTYPE html>
<html lang="de" data-theme="light">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dark Mode Toggle Demo</title>
<style>
:root {
--bg-color: #ffffff;
--text-color: #000000;
}
[data-theme="dark"] {
--bg-color: #1e1e1e;
--text-color: #ffffff;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
font-family: sans-serif;
transition: background-color 0.3s ease, color 0.3s ease;
}
.darkmode-toggle {
margin: 1rem;
padding: 0.5rem 1rem;
cursor: pointer;
background: none;
border: 2px solid var(--text-color);
color: var(--text-color);
}
</style>
</head>
<body>
<button class="darkmode-toggle">Dark Mode umschalten</button>
<p>Beispieltext</p>
<script>
document.addEventListener('DOMContentLoaded', () => {
const toggle = document.querySelector('.darkmode-toggle');
const root = document.documentElement;
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
root.setAttribute('data-theme', savedTheme);
}
toggle.addEventListener('click', () => {
const current = root.getAttribute('data-theme');
const next = current === 'dark' ? 'light' : 'dark';
root.setAttribute('data-theme', next);
localStorage.setItem('theme', next);
});
});
</script>
</body>
</html>Was kann man damit noch alles anstellen?
Sobald du data-theme und CSS-Variablen im Griff hast, kannst du damit ganze Designsysteme steuern: verschiedene Farbpaletten (z. B. „minimal“, „kontrastreich“, „brand-based“), visuelle Barrierefreiheit (z. B. hoher Kontrast für Sehschwäche). Auch Schriftgrößen, Abstände oder Animationen lassen sich per Theme umschalten.