feniweb

Umschalten zwischen dark und light

—

in , , , ,

Umschalten zwischen dark und light

Um zwischen einem Dark-Modus und einem Light-Modus umzuschalten, kannst du mit einem Schalter (switch button) und CSS-Variablen arbeiten. Hier ist eine vollständige Lösung mit HTML, CSS und JavaScript:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dark/Light Mode Toggle</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="theme-switcher">
    <label class="switch">
      <input type="checkbox" id="theme-toggle">
      <span class="slider"></span>
    </label>
    <span id="theme-label">Light Mode</span>
  </div>

  <main>
    <h1>Willkommen!</h1>
    <p>Schalte zwischen dem Dark-Modus und dem Light-Modus um.</p>
  </main>

  <script src="script.js"></script>
</body>
</html>

CSS

/* Basis-Styling */
:root {
  --bg-color: #ffffff;
  --text-color: #000000;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}

main {
  padding: 20px;
  text-align: center;
}

/* Dark Mode Variablen */
body.dark {
  --bg-color: #121212;
  --text-color: #ffffff;
}

/* Theme-Switcher */
.theme-switcher {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Switch-Styling */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  border-radius: 24px;
  transition: 0.3s;
}

.slider:before {
  position: absolute;
  content: '';
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: 0.3s;
}

input:checked + .slider {
  background-color: #4caf50;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

JavaScript

document.addEventListener('DOMContentLoaded', () => {
  const toggle = document.getElementById('theme-toggle');
  const body = document.body;
  const themeLabel = document.getElementById('theme-label');

  // Lade das gespeicherte Thema aus dem lokalen Speicher
  const savedTheme = localStorage.getItem('theme') || 'light';
  if (savedTheme === 'dark') {
    body.classList.add('dark');
    toggle.checked = true;
    themeLabel.textContent = 'Dark Mode';
  }

  // Event Listener für den Switch
  toggle.addEventListener('change', () => {
    if (toggle.checked) {
      body.classList.add('dark');
      themeLabel.textContent = 'Dark Mode';
      localStorage.setItem('theme', 'dark');
    } else {
      body.classList.remove('dark');
      themeLabel.textContent = 'Light Mode';
      localStorage.setItem('theme', 'light');
    }
  });
});

Funktionsweise

  1. CSS-Variablen:
    • Die Farben für den Hintergrund (--bg-color) und den Text (--text-color) werden mit CSS-Variablen definiert.
    • Je nach Modus (light oder dark) ändern wir die Variablenwerte.
  2. Dark-Modus aktivieren:
    • Wenn der Schalter aktiviert wird (input:checked), wird der dark-Modus über die Klasse dark auf das <body>-Element angewendet.
  3. Lokaler Speicher (localStorage):
    • Das aktuelle Thema wird im Browser gespeichert, sodass der Modus auch nach einem Seiten-Neuladen erhalten bleibt.
  4. Sanfte Übergänge:
    • Mit transition in CSS wird ein weicher Übergang zwischen den Themen ermöglicht.

Ergebnis

Der Moduswechsel erfolgt visuell ansprechend durch sanfte Übergänge. 😊

Beim Umschalten des Schalters wechselt die Seite zwischen dem Dark-Modus und dem Light-Modus.

Die Präferenz des Nutzers wird im localStorage gespeichert, sodass die Einstellung nach einem Neuladen der Seite erhalten bleibt.