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:

• Verbesserte Benutzererfahrung: Viele Benutzer empfinden den Dark Mode als angenehmer für die Augen, da er die Augenbelastung reduziert, insbesondere beim Surfen bei Nacht oder in schwach beleuchteten Umgebungen. Dies kommt einem globalen Publikum mit unterschiedlichen Bildschirmnutzungsgewohnheiten und Lichtverhältnissen entgegen.
• Barrierefreiheit: Der Dark Mode kann die Barrierefreiheit für Benutzer mit Sehbehinderungen oder Lichtempfindlichkeit verbessern. Indem Sie eine kontrastreiche Option anbieten, machen Sie Ihre Website inklusiver.
• Akkulaufzeit: Auf Geräten mit OLED- oder AMOLED-Bildschirmen kann der Dark Mode den Stromverbrauch senken und die Akkulaufzeit verlängern. Dies ist besonders relevant für mobile Benutzer in Gebieten mit eingeschränktem Zugang zu Ladeinfrastruktur.
• Moderner Designtrend: Der Dark Mode ist ein beliebter Designtrend, und seine Implementierung kann Ihre Website moderner und ansprechender aussehen lassen. Dies verbessert die Markenwahrnehmung und das Benutzerengagement.

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:

• CSS Media Queries (prefers-color-scheme): Diese Methode erkennt automatisch das bevorzugte Farbschema des Benutzers basierend auf seinen Betriebssystemeinstellungen.
• JavaScript-Umschalter: Diese Methode bietet einen manuellen Umschalter (z. B. einen Schalter oder eine Schaltfläche), mit dem Benutzer zwischen hellem und dunklem Modus wechseln können.
• Kombination von Media Queries und JavaScript: Dieser Ansatz kombiniert die Vorteile beider Methoden und bietet eine automatische Erkennung, während Benutzer gleichzeitig die Systemeinstellung überschreiben können.

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;
  }
}

            

              
                Copy
              
            
          

Erläuterung:

• Der erste CSS-Block definiert die Standardstile (helles Theme).
• Der Block @media (prefers-color-scheme: dark) wendet Stile nur an, wenn das System des Benutzers auf den Dark Mode eingestellt ist.
• Innerhalb des @media-Blocks können Sie die Dark-Mode-Stile für verschiedene Elemente definieren, z. B. die Hintergrund- und Textfarbe des Körpers, Überschriften und Links.

Vorteile

• Automatische Erkennung: Der Browser erkennt automatisch die Präferenz des Benutzers und bietet so eine nahtlose Erfahrung.
• Einfache Implementierung: Diese Methode erfordert minimalen Code und ist einfach zu implementieren.
• Leistung: CSS Media Queries werden vom Browser effizient verarbeitet.

Nachteile

• Eingeschränkte Kontrolle: Benutzer können innerhalb Ihrer Website nicht manuell zwischen hellem und dunklem Modus wechseln.
• Abhängigkeit von Systemeinstellungen: Das Erscheinungsbild hängt vollständig von den Systemeinstellungen des Benutzers ab, über die er sich möglicherweise nicht bewusst ist oder die er nicht ändern kann.

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>

            

              
                Copy
              
            
          

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%;
}

            

              
                Copy
              
            
          

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);

            

              
                Copy
              
            
          

Erläuterung:

• Der Code ruft das Umschaltelement und das Körperelement ab.
• Die Funktion toggleDarkMode schaltet die Klasse dark-mode auf dem Körperelement um.
• Der Code verwendet localStorage, um die Benutzereinstellung zu speichern, sodass sie über Sitzungen hinweg erhalten bleibt.
• Der Code überprüft localStorage beim Laden der Seite, um die gespeicherte Einstellung anzuwenden.
• Dem Umschalter wird ein Event Listener hinzugefügt, sodass die Funktion toggleDarkMode aufgerufen wird, wenn auf den Umschalter geklickt wird.

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;
}

            

              
                Copy
              
            
          

Vorteile

• Benutzerkontrolle: Benutzer können innerhalb Ihrer Website manuell zwischen hellem und dunklem Modus wechseln.
• Persistenz: Die Benutzereinstellung wird mit localStorage gespeichert, sodass sie über Sitzungen hinweg erhalten bleibt.

Nachteile

• Komplexere Implementierung: Diese Methode erfordert mehr Code als die alleinige Verwendung von CSS Media Queries.
• JavaScript-Abhängigkeit: Die Umschaltfunktion ist darauf angewiesen, dass JavaScript im Browser des Benutzers aktiviert ist.

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);

            

              
                Copy
              
            
          

Erläuterung:

• Der Code überprüft zuerst localStorage auf eine gespeicherte Einstellung.
• Wenn in localStorage keine Einstellung gefunden wird, wird überprüft, ob das System des Benutzers den Dark Mode über window.matchMedia bevorzugt.
• Wenn das System den Dark Mode bevorzugt, wird dem Körper die Klasse dark-mode hinzugefügt und der Umschalter aktiviert.

Vorteile

• Automatische Erkennung und Benutzerkontrolle: Bietet sowohl automatische Erkennung als auch manuelle Steuerung.
• Persistenz: Die Benutzereinstellung wird mit localStorage gespeichert.

Nachteile

• Etwas komplexer: Diese Methode ist etwas komplexer als die Verwendung einer der beiden Methoden allein.
• JavaScript-Abhängigkeit: Ist darauf angewiesen, dass JavaScript aktiviert ist.

Ü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:

• Farbkontrast: Stellen Sie sicher, dass in hellem und dunklem Modus ein ausreichender Farbkontrast zwischen Text und Hintergrund besteht. Verwenden Sie Tools wie den Contrast Checker von WebAIM (webaim.org/resources/contrastchecker/), um zu überprüfen, ob Ihre Farbkombinationen die Standards für Barrierefreiheit erfüllen. Dies ist besonders wichtig für Benutzer mit Sehschwäche.
• Fokusindikatoren: Stellen Sie sicher, dass Fokusindikatoren sowohl im hellen als auch im dunklen Modus deutlich sichtbar sind, damit Benutzer, die mit einer Tastatur navigieren, leicht erkennen können, welches Element gerade fokussiert ist.
• Bilder und Symbole: Überlegen Sie, wie Bilder und Symbole im Dark Mode angezeigt werden. Möglicherweise müssen Sie alternative Versionen bereitstellen oder CSS-Filter verwenden, um ihre Farben für eine optimale Sichtbarkeit anzupassen.
• Benutzertests: Testen Sie Ihre Dark-Mode-Implementierung mit Benutzern mit unterschiedlichen Sehbehinderungen, um etwaige Barrierefreiheitsprobleme zu identifizieren und zu beheben.

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:

• Verwenden Sie CSS-Variablen (benutzerdefinierte Eigenschaften): CSS-Variablen ermöglichen es Ihnen, Farben und andere Stile an einem zentralen Ort zu definieren, wodurch es einfacher wird, Ihr Design zu verwalten und zu aktualisieren.
• Gründlich testen: Testen Sie Ihre Dark-Mode-Implementierung auf verschiedenen Geräten und Browsern, um Konsistenz zu gewährleisten.
• Bieten Sie einen klaren Umschalter an: Machen Sie den Umschalter leicht zu finden und zu verwenden. Verwenden Sie ein klares und intuitives Symbol, um seine Funktion anzuzeigen.
• Berücksichtigen Sie die Benutzereinstellungen: Respektieren Sie die Benutzereinstellungen und speichern Sie sie mit localStorage oder Cookies.
• Konsistenz wahren: Stellen Sie sicher, dass Ihre Dark-Mode-Implementierung auf Ihrer gesamten Website konsistent ist.

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;
}

            

              
                Copy
              
            
          

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.