Theme Switcher mit JS: Gestalte deine Website individuell

03.06.2026

Einleitung

Das Gestalten einer Website kann sowohl eine kreative als auch technische Herausforderung sein. Ein Trend, der sich in den letzten Jahren etabliert hat, ist der Einsatz von Theme Switchern. Mit einem Theme Switcher können Nutzer zwischen verschiedenen Layouts oder Farbschemata deiner Website wählen. In diesem Artikel zeige ich dir, wie du einen einfachen Theme Switcher mit HTML, CSS und JavaScript implementierst.

Warum ein Theme Switcher?

Ein Theme Switcher bietet nicht nur ästhetische Vorteile, sondern verbessert auch die Benutzerfreundlichkeit. Nutzer können das Layout an ihre Vorlieben oder Lichtverhältnisse anpassen, was besonders bei der Verwendung von Dunkel- und Hellmodus hilfreich ist. Dies kann die Verweildauer auf deiner Seite erhöhen und das Nutzererlebnis verbessern.

Grundlagen: HTML und CSS

Bevor wir mit dem JavaScript-Teil beginnen, benötigen wir eine solide Grundlage mit HTML und CSS. Wir erstellen zwei verschiedene CSS-Klassen, die unterschiedliche Design-Themen darstellen. Hier ein einfaches Beispiel:

HTML:

<div id="theme-container">
  <p>Willkommen auf meiner Website!</p>
  <button onclick="switchTheme()">Wechsle das Thema</button>
</div>
```

CSS:
.light-theme {
  background-color: white;
  color: black;
}

.dark-theme {
  background-color: black;
  color: white;
}


JavaScript: Der Theme Switcher
Jetzt kommt der spannende Teil: das Hinzufügen der Funktionalität mit JavaScript. Wir erstellen eine einfache Funktion, die zwischen den beiden CSS-Klassen hin- und herschaltet:

```html
function switchTheme() {
  const container = document.getElementById('theme-container');
  if (container.classList.contains('light-theme')) {
    container.classList.remove('light-theme');
    container.classList.add('dark-theme');
  } else {
    container.classList.remove('dark-theme');
    container.classList.add('light-theme');
  }
}


Diese Funktion überprüft, ob das Element mit der ID theme-container die Klasse light-theme hat. Wenn ja, wird diese entfernt und durch dark-theme ersetzt und umgekehrt.

Speichern der Nutzereinstellungen
Um die Nutzererfahrung zu optimieren, ist es sinnvoll, die Theme-Auswahl auch nach einem Seiten-Reload zu speichern. Hierfür verwenden wir den localStorage:

```html
function switchTheme() {
  const container = document.getElementById('theme-container');
  if (container.classList.contains('light-theme')) {
    container.classList.remove('light-theme');
    container.classList.add('dark-theme');
    localStorage.setItem('theme', 'dark');
  } else {
    container.classList.remove('dark-theme');
    container.classList.add('light-theme');
    localStorage.setItem('theme', 'light');
  }
}

window.onload = () => {
  const savedTheme = localStorage.getItem('theme');
  const container = document.getElementById('theme-container');
  if (savedTheme) {
    container.classList.add(savedTheme + '-theme');
  } else {
    container.classList.add('light-theme');
  }
}


Die Funktion window.onload wird aufgerufen, wenn die Seite geladen wird. Sie überprüft, ob ein gespeichertes Thema existiert, und wendet es an.

Fazit
Ein Theme Switcher ist eine grossartige Möglichkeit, die Benutzerfreundlichkeit deiner Website zu erhöhen. Mit nur wenigen Zeilen HTML, CSS und JavaScript kannst du deinen Nutzern die Freiheit geben, das Aussehen deiner Website nach ihren Vorlieben anzupassen. Experimentiere mit verschiedenen Designs und finde heraus, was am besten zu deiner Zielgruppe passt!

Lerne, wie du einen Theme Switcher mit HTML, CSS und JavaScript erstellst, um das Nutzererlebnis auf deiner Website zu verbessern.