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 zeigen wir 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.
Demo
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.
