Playground | Webseitenland - Experimentiere mit Webdesign

Ein einfacher Dark Mode Toggle, der die Farben der Website ändert.

Demo

Code

HTML

CSS

JavaScript

<button class="dark-mode-toggle">Dark Mode</button>

.dark-mode-toggle {
  padding: 12px 24px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.dark-mode-toggle:hover {
  background-color: #45a049;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transform: translateY(-2px);
}

Erklärung

Diese Lösung implementiert einen vollständigen Dark Mode mit mehreren fortschrittlichen Konzepten:

CSS-Variablen (Custom Properties) für Farben, die einfach umgeschaltet werden können
LocalStorage zum Speichern der Benutzerpräferenz
Optionale Erkennung der Systemeinstellung mit prefers-color-scheme
Animierte Übergänge zwischen den Modi
Dynamisches Wechseln des Icons

Der JavaScript-Code schaltet die dark-mode-Klasse am body-Element um, was alle CSS-Variablen aktualisiert und somit das gesamte Farbschema der Website ändert.

Verwendung

Füge diesen Dark-Mode-Toggle zu deiner Website hinzu, um den Benutzern eine angenehmere Lese-Erfahrung zu bieten, besonders in dunklen Umgebungen oder nachts. Die Präferenz wird gespeichert und bei zukünftigen Besuchen wieder angewendet.