Theme Umschalten.
Ein einfaches Lernbeispiel, wie du in WordPress zwischen Hell- und Dunkel-Theme umschaltest. Unten findest du Beispiel-Code für Button, Styles und Skript – zum Anschauen und Kopieren.
Dark Mode Button HTML & CSS
Dies ist der HTML- und CSS-Code für den Umschalt-Button und das Basis-Design.
<button id="dark-mode-toggle" aria-pressed="false" aria-label="Dark Mode umschalten">Umschalten</button>
<style>
body {
background-color: white;
color: black;
transition: background-color 0.4s, color 0.4s;
}
body.dark-mode {
background-color: #121212;
color: #eee;
}
</style>JavaScript fürs Umschalten (Footer)
So erreichst du das Umschalten zwischen den Themes per Button-Klick mit einfachem Script.
<script>
const btn = document.getElementById('dark-mode-toggle');
const body = document.body;
btn.addEventListener('click', () => {
const enabled = body.classList.toggle('dark-mode');
btn.setAttribute('aria-pressed', enabled);
});
</script>Theme umschalten – sichere Variante
Hier zeige ich eine verbesserte und sichere Variante, die den Dark Mode bereits beim Laden der Seite aktiviert, falls der Benutzer ihn zuvor gewählt hat. So wird vermieden, dass die Seite kurz im hellen Design auftaucht (FOUC – Flash of Unstyled Content).
<head>
<script>
try {
if(localStorage.getItem('darkMode') === 'true') {
document.documentElement.classList.add('dark-mode');
}
} catch(e) {}
</script>
<style>
:root {
--background: #fff;
--text-color: #000;
}
html.dark-mode {
--background: #121212;
--text-color: #eee;
}
body {
background-color: var(--background);
color: var(--text-color);
transition: background-color 0.3s, color 0.3s;
}
</style>
</head>
<body>
<button id="dark-mode-toggle" aria-pressed="false" aria-label="Theme umschalten">Umschalten</button>
<script>
const html = document.documentElement;
const btn = document.getElementById('dark-mode-toggle');
function applyDarkMode(enabled) {
if(enabled) {
html.classList.add('dark-mode');
} else {
html.classList.remove('dark-mode');
}
btn.setAttribute('aria-pressed', enabled);
}
// Status beim Laden anwenden
const darkModeEnabled = localStorage.getItem('darkMode') === 'true';
applyDarkMode(darkModeEnabled);
// Umschalten bei Button-Klick
btn.addEventListener('click', e => {
e.preventDefault();
const enabled = html.classList.toggle('dark-mode');
applyDarkMode(enabled);
localStorage.setItem('darkMode', enabled);
});
</script>
</body>Was macht die sichere Variante anders?
- Frühes Setzen der Klasse im <head>: Das kleine Script prüft
localStorageund setzt diedark-modeKlasse auf <html>, bevor CSS geladen wird – so vermeidest du das kurze Aufblitzen des hellen Designs. - CSS Variablen: Anstatt fixe Farben in
body.dark-modezu setzen, werden CSS-Variablen--backgroundund--text-colormithtml.dark-modeüberschrieben. Das macht die Farbverwaltung flexibler und moderner. - Speicherung des Modus: Wie im einfachen Beispiel wird der Dark Mode Zustand mit
localStoragegespeichert und beim Laden wiederhergestellt.
Fazit: Die sichere Variante ist empfehlenswert für eine bessere User Experience, besonders wenn deine Website viele CSS lädt oder große Inhalte hat. Das Umschalten zwischen Hell- und Dunkel-Theme ist eine einfache, aber wirkungsvolle Funktion für mehr Komfort und bessere Nutzererfahrung. Wenn du weitere praktische Frontend-Funktionen umsetzen möchtest, schau dir als Nächstes mein Sticky Header Tutorial, den Back to Top Button und den Back to Top Button Generator an.
Weiterlernen
Für ein gut lesbares Dark-Theme prüfst du deine Farben mit dem Farbkontrast-Checker nach WCAG und findest passende Töne mit dem Farbpalette Generator. Sanfte Übergänge baust du mit Keyframe-Animationen in CSS, und in WordPress gehört der Code am besten in ein Child Theme. Dasselbe Speicherprinzip mit localStorage nutzt auch das selbst erstellte Cookie Banner.
Du möchtest einen Dark Mode für deine WordPress-Seite, ohne selbst zu programmieren? Ich übernehme die WordPress-Programmierung.
Demo zum Ausprobieren.
Beispielinhalt
Der Hintergrund und die Textfarbe dieses Bereichs ändern sich nur bei diesem Div.
Ob Webseite, Webshop oder Portal, ich setze Ihr Vorhaben zu Ihrer Zufriedenheit um. Von der Konzeption über die Gestaltung und der technischen Umsetzung bis zum Internetmarketing Ihrer Webseite biete ich Ihnen professionelles und modernes Webdesign aus einer Hand.
FAQ: Theme umschalten
Alles zu Dark Mode, FOUC und sicherer Umsetzung
Was bedeutet „Theme umschalten“ (Dark Mode / Light Mode)?
„Theme umschalten“ bezeichnet das Umschalten zwischen unterschiedlichen visuellen Darstellungen einer Website – typischerweise Hell- und Dunkelmodus. Nutzer können per Button oder Systemeinstellung eine Variante wählen. Ein korrekt implementiertes Umschalten verbessert Lesbarkeit, Nutzerkomfort und kann Energie sparen (bei OLED-Displays).
Was ist der einfachste Weg, um ein Theme-Umschalt-Button zu implementieren?
Die einfachste Lösung besteht aus drei Teilen: HTML-Button, CSS-Klassenschalter (z. B. body.dark-mode) und ein kleines JavaScript, das beim Klick die Klasse toggelt. Für Produktion empfiehlt sich jedoch die sichere Variante, die FOUC vermeidet und den Zustand speichert.
Was ist FOUC (Flash of Unstyled Content) und wie verhindert die sichere Variante das Aufblitzen?
FOUC bezeichnet das kurzzeitige Anzeigen des Default-Designs, bevor die gewünschte Theme-Klasse bzw. das CSS angewendet wird. Die sichere Variante prüft bereits im head-Bereich localStorage und setzt die Klasse sofort, sodass die richtige Farbvariable schon beim Laden aktiv ist.
Warum sind CSS-Variablen für Theme-Umschaltung empfehlenswert?
CSS-Variablen erlauben zentrale Farb- und Stilsteuerung. Durch Überschreiben in html.dark-mode lassen sich Farben, Abstände oder Schatten an einer Stelle anpassen, ohne alle Selektoren doppelt pflegen zu müssen – das erleichtert Wartung und Erweiterung deutlich.
Sollte ich localStorage oder Cookies zur Speicherung der Theme-Wahl verwenden?
localStorage ist die gängige und einfache Methode, um die Auswahl clientseitig im Browser zu persistieren. Cookies würden zusätzliche Serverkommunikation erfordern und sind dafür meist überdimensioniert. Zugriffe auf localStorage sollten immer in try/catch eingebettet werden.
Kann ich das Umschalten auch an die Systemeinstellung (prefers-color-scheme) koppeln?
Ja. Mit @media (prefers-color-scheme: dark) lässt sich ein Default-Verhalten definieren, das die Systemeinstellung berücksichtigt. Kombiniert mit localStorage prüfst du zuerst die Nutzerwahl, danach – falls ungesetzt – die Systempräferenz.
Wie integriere ich das Umschalten sauber in WordPress (Themes / Page Builder)?
Die sichere Variante reicht: Script im head (z. B. via wp_head() oder Inline-Script im Theme), Styles im globalen CSS und das Umschalt-Script im Footer per Enqueue. Bei Page-Buildern wie Elementor lässt sich der Button als Widget oder Template-Part einfügen.
Wie teste ich das Umschalten auf Kompatibilität und Fehler?
Teste in verschiedenen Browsern, auf Mobile/Desktop und im privaten Modus. Prüfe FOUC, ob localStorage funktioniert, die Kontrastverhältnisse (WCAG) beider Themes und ob keine JS-Fehler in der Konsole auftreten. Lighthouse eignet sich gut für Accessibility- und Performance-Checks.
Welche Accessibility-Aspekte sind beim Dark Mode wichtig?
Ausreichender Farbkontrast, klare Fokuszustände für Tastaturnavigation, aria-labels für den Umschaltbutton (aria-pressed, aria-label) und Screenreader-Tests. Der Button sollte per Tab erreichbar sein und Zustandsänderungen für assistive Technologien nachvollziehbar sein.
Kann das Umschalten Layout- oder Design-Bugs verursachen?
Ja, vor allem bei Komponenten mit festen Farben, Schatten-Effekten oder Bildern, die nur für ein Theme erstellt wurden. Farben über Variablen steuern, Bilder ggf. anpassen und Komponenten in beiden Modi testen hilft, solche Bugs zu vermeiden.
Wie gehe ich mit Bildern, Icons oder Logos im Dark Mode um?
Kontrast und Lesbarkeit prüfen. Für Logos empfiehlt sich eine reduzierte (weiße) Variante oder SVG-Icons mit CSS-Fill-Variablen. Bilder mit transparentem Hintergrund lassen sich per alternativer Bildvariante oder CSS-Filter anpassen – Filter können allerdings die Bildqualität verändern.
Sollte der Dark Mode Animationen oder Übergänge haben?
Sanfte Übergänge bei Hintergrund- und Textfarbe verbessern die UX. Beachte dabei @media (prefers-reduced-motion: reduce), um Animationen für Nutzer zu deaktivieren, die reduzierte Bewegung bevorzugen.
Wie verhindere ich, dass Server-Side-Rendering (SSR) Probleme beim Theme-Umschalten verursacht?
Bei SSR-Setups ist localStorage während der initialen Renderphase clientseitig nicht verfügbar. Löse dies über eine neutrale Default-Variante beim Server-Render mit anschließender clientseitiger Synchronisierung, oder lies die Theme-Präferenz aus Cookies.
Kann ich das Theme-Umschalten per CSS-Only umsetzen?
Teilweise, etwa über den Checkbox-Hack mit :checked-Selektor. CSS-Only-Lösungen haben aber Einschränkungen bei Persistenz, Accessibility und Systempräferenzen – für eine robuste Lösung empfiehlt sich eine kleine JavaScript-Implementierung.
Wo platziere ich den Umschalt-Button idealerweise auf der Seite?
Häufig oben rechts in der Navigation oder als gut sichtbarer Button im Header. Achte auf mobilen Ansichten auf ausreichend große Touch-Targets und darauf, dass der Button nicht mit anderen UI-Elementen kollidiert.
Kann ich den Dark Mode per CSS-Klasse global auf html statt body setzen?
Ja – html.dark-mode wird oft empfohlen, weil Variablen auf :root früher greifen und manche CSS-Resets auf html-Ebene arbeiten. Die sichere Variante nutzt daher meist html.classList.add('dark-mode'), um FOUC zu minimieren.
Welche Best Practices empfiehlst du für Entwickler, die Theme-Umschaltung einbauen wollen?
CSS-Variablen nutzen, die Theme-Klasse früh im head setzen, die Wahl in localStorage speichern, prefers-color-scheme und prefers-reduced-motion unterstützen, intensiv testen und Theme-Variablen im Design-System dokumentieren. JS-Logik klein und robust halten (try/catch) und Komponenten theme-unabhängig über Variablen steuern.