M

MLOG

Deutsch

Implementieren Sie den Dark Mode auf Ihrer Website mit diesem umfassenden Leitfaden. Erfahren Sie mehr über CSS Media Queries, JavaScript-Umschalter, Überlegungen zur Barrierefreiheit und Best Practices für eine nahtlose Benutzererfahrung.

Dark Mode Implementierung: Ein umfassender Leitfaden mit CSS und JavaScript

Der Dark Mode erfreut sich wachsender Beliebtheit und bietet ein angenehmeres Seherlebnis, insbesondere in Umgebungen mit wenig Licht. Dieser Leitfaden bietet einen umfassenden Überblick darüber, wie Sie den Dark Mode auf Ihrer Website mit CSS und JavaScript implementieren können, um eine nahtlose und barrierefreie Benutzererfahrung für ein globales Publikum zu gewährleisten.

Warum Dark Mode implementieren?

Es gibt mehrere überzeugende Gründe, die für die Implementierung des Dark Mode sprechen:

Methoden zur Implementierung des Dark Mode

Es gibt verschiedene Ansätze zur Implementierung des Dark Mode, jeder mit seinen eigenen Vor- und Nachteilen. Wir werden die gängigsten Methoden untersuchen:

1. Implementierung des Dark Mode mit CSS Media Queries

Die prefers-color-scheme CSS Media Query ermöglicht es Ihnen, das bevorzugte Farbschema des Benutzers zu erkennen und verschiedene Stile entsprechend anzuwenden. Dies ist der einfachste und effizienteste Weg, den Dark Mode für Benutzer zu implementieren, die ihre Systemeinstellungen bereits festgelegt haben.

Codebeispiel

Fügen Sie das folgende CSS zu Ihrem Stylesheet hinzu:

/* Standard (Helles) Theme */
body {
  background-color: #fff;
  color: #000;
}

/* Dunkles Theme */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #222;
    color: #fff;
  }
  /* Passen Sie andere Elemente nach Bedarf an */
  h1, h2, h3 {
    color: #ddd;
  }
  a {
    color: #8ab4f8;
  }
}

Erläuterung:

Vorteile

Nachteile

2. Implementierung des Dark Mode mit einem JavaScript-Umschalter

Die Verwendung eines JavaScript-Umschalters bietet Benutzern einen manuellen Schalter zur Steuerung des Designs der Website. Dies gibt Benutzern mehr Kontrolle und ermöglicht es ihnen, ihre Systemeinstellungen zu überschreiben. Dieser Ansatz ist entscheidend, um Benutzer auf verschiedenen Geräten und Plattformen anzusprechen, die systemweite Dark-Mode-Einstellungen möglicherweise nicht konsistent unterstützen oder offenlegen.

HTML-Struktur

Fügen Sie zunächst ein Umschaltelement zu Ihrem HTML hinzu:

<label class="switch">
  <input type="checkbox" id="darkModeToggle">
  <span class="slider round"></span>
</label>

Dadurch wird ein einfacher Kippschalter mithilfe eines Kontrollkästchens und einiger benutzerdefinierter CSS-Formatierungen erstellt.

CSS-Formatierung (Optional)

Sie können den Kippschalter mit CSS formatieren. Hier ist ein Beispiel:

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

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

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

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

/* Abgerundete Schieberegler */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

JavaScript-Code

Fügen Sie nun den folgenden JavaScript-Code hinzu, um die Umschaltfunktion zu verarbeiten:

const darkModeToggle = document.getElementById('darkModeToggle');
const body = document.body;

// Funktion zum Umschalten des Dark Mode
function toggleDarkMode() {
  body.classList.toggle('dark-mode');

  // Speichern Sie die Benutzereinstellung in localStorage
  if (body.classList.contains('dark-mode')) {
    localStorage.setItem('darkMode', 'enabled');
  } else {
    localStorage.setItem('darkMode', 'disabled');
  }
}

// Überprüfen Sie localStorage auf gespeicherte Einstellungen
if (localStorage.getItem('darkMode') === 'enabled') {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
}

// Fügen Sie dem Umschalter einen Event Listener hinzu
darkModeToggle.addEventListener('change', toggleDarkMode);

Erläuterung:

CSS-Formatierung für den Dark Mode (mit Klasse)

Aktualisieren Sie Ihr CSS, um die Klasse dark-mode zu verwenden, um die Dark-Theme-Stile anzuwenden:

/* Standard (Helles) Theme */
body {
  background-color: #fff;
  color: #000;
}

/* Dunkles Theme */
body.dark-mode {
  background-color: #222;
  color: #fff;
}

body.dark-mode h1, body.dark-mode h2, body.dark-mode h3 {
  color: #ddd;
}

body.dark-mode a {
  color: #8ab4f8;
}

Vorteile

Nachteile

3. Kombination von Media Queries und JavaScript

Der beste Ansatz ist oft die Kombination von CSS Media Queries und einem JavaScript-Umschalter. Dies bietet das Beste aus beiden Welten: automatische Erkennung des bevorzugten Farbschemas des Benutzers und gleichzeitige Möglichkeit für Benutzer, die Systemeinstellung manuell zu überschreiben. Dies kommt einem breiteren Publikum entgegen, einschließlich derjenigen, die sich der systemweiten Designeinstellungen möglicherweise nicht bewusst sind oder diese nicht ändern können.

Codebeispiel

Verwenden Sie dasselbe HTML und CSS aus dem JavaScript-Umschaltbeispiel. Ändern Sie das JavaScript, um die Systemeinstellung zu überprüfen:

const darkModeToggle = document.getElementById('darkModeToggle');
const body = document.body;

// Funktion zum Umschalten des Dark Mode
function toggleDarkMode() {
  body.classList.toggle('dark-mode');

  // Speichern Sie die Benutzereinstellung in localStorage
  if (body.classList.contains('dark-mode')) {
    localStorage.setItem('darkMode', 'enabled');
  } else {
    localStorage.setItem('darkMode', 'disabled');
  }
}

// Überprüfen Sie localStorage auf gespeicherte Einstellungen und dann auf Systemeinstellungen
if (localStorage.getItem('darkMode') === 'enabled') {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
}

// Fügen Sie dem Umschalter einen Event Listener hinzu
darkModeToggle.addEventListener('change', toggleDarkMode);

Erläuterung:

Vorteile

Nachteile

Überlegungen zur Barrierefreiheit

Bei der Implementierung des Dark Mode ist es wichtig, die Barrierefreiheit zu berücksichtigen, um sicherzustellen, dass Ihre Website für alle Benutzer weiterhin nutzbar ist. Denken Sie daran, dass die bloße Invertierung von Farben nicht automatisch die Barrierefreiheit garantiert. Hier sind einige wichtige Überlegungen:

Best Practices für die Dark-Mode-Implementierung

Hier sind einige Best Practices, die Sie bei der Implementierung des Dark Mode auf Ihrer Website befolgen sollten:

Beispiel: CSS-Variablen für das Theming

CSS-Variablen erleichtern das Umschalten zwischen hellen und dunklen Designs. Definieren Sie die Variablen in der Pseudoklasse :root:

:root {
  --bg-color: #fff;
  --text-color: #000;
  --link-color: #007bff;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

a {
  color: var(--link-color);
}

body.dark-mode {
  --bg-color: #222;
  --text-color: #fff;
  --link-color: #8ab4f8;
}

Wenn nun dem Körper die Klasse dark-mode hinzugefügt wird, werden die CSS-Variablen aktualisiert und die Stile automatisch angewendet.

Fazit

Die Implementierung des Dark Mode kann die Benutzererfahrung Ihrer Website erheblich verbessern, die Barrierefreiheit verbessern und sogar die Akkulaufzeit verlängern. Indem Sie die in diesem Leitfaden beschriebenen Techniken und Best Practices befolgen, können Sie eine nahtlose und angenehme Dark-Mode-Erfahrung für Ihre Benutzer weltweit schaffen.

Denken Sie daran, der Barrierefreiheit Priorität einzuräumen und Ihre Implementierung gründlich zu testen, um sicherzustellen, dass Ihre Website für alle Benutzer nutzbar bleibt, unabhängig von ihren Vorlieben oder Sehfähigkeiten.

Durch die durchdachte Implementierung des Dark Mode folgen Sie nicht nur einem Trend, sondern schaffen auch ein integrativeres und benutzerfreundlicheres Weberlebnis für ein globales Publikum. Dieses Engagement für die Benutzererfahrung kann die Gesamtleistung und Attraktivität Ihrer Website erheblich verbessern.