M

MLOG

Deutsch

Entdecken Sie die Leistungsfähigkeit von CSS-Media-Queries und Custom Properties, um automatische helle und dunkle Themes zu erstellen, die sich an Benutzerpräferenzen anpassen und so die Zugänglichkeit und visuelle Attraktivität für ein globales Publikum verbessern.

CSS Light-Dark-Funktion: Automatische Theme-Anpassung für ein globales Web

In der heutigen global vernetzten Welt müssen Websites für Benutzer mit unterschiedlichen Hintergründen und Vorlieben zugänglich und visuell ansprechend sein. Eine der effektivsten Methoden, dies zu erreichen, ist die automatische Theme-Anpassung, insbesondere das Anbieten von hellen und dunklen Themes, die sich an die Systemeinstellungen des Benutzers anpassen. Dieser Blogbeitrag führt Sie durch die Implementierung dieser Funktionalität mit CSS-Media-Queries und Custom Properties, um ein nahtloses und komfortables Surferlebnis für Ihr internationales Publikum zu gewährleisten.

Warum automatische helle und dunkle Themes implementieren?

Es gibt mehrere überzeugende Gründe, die automatische Theme-Anpassung in Ihre Webprojekte zu integrieren:

Wie man die automatische Theme-Anpassung mit CSS implementiert

Der Kern der automatischen Theme-Anpassung liegt in der prefers-color-scheme Media-Query. Diese CSS-Media-Query ermöglicht es Ihnen, das bevorzugte Farbschema des Benutzers (hell oder dunkel) zu erkennen und entsprechende Stile anzuwenden.

Schritt 1: Custom Properties (CSS-Variablen) definieren

Beginnen Sie mit der Definition von Custom Properties (CSS-Variablen), um die Farbwerte für Ihre hellen und dunklen Themes zu speichern. Dies erleichtert das Umschalten zwischen den Themes, indem einfach die Variablenwerte aktualisiert werden.


:root {
  --background-color: #ffffff; /* Hintergrund helles Theme */
  --text-color: #000000; /* Text helles Theme */
  --link-color: #007bff; /* Link helles Theme */
  --button-background-color: #f0f0f0;
  --button-text-color: #000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #121212; /* Hintergrund dunkles Theme */
    --text-color: #ffffff; /* Text dunkles Theme */
    --link-color: #66b3ff; /* Link dunkles Theme */
    --button-background-color: #333;
    --button-text-color: #fff;
  }
}

In diesem Beispiel definieren wir Variablen für Hintergrundfarbe, Textfarbe, Linkfarbe und Buttonfarben. Der :root-Selektor wendet diese Variablen auf das gesamte Dokument an. Die @media (prefers-color-scheme: dark) Media-Query überschreibt diese Variablen dann mit den Werten für das dunkle Theme, wenn der Benutzer sein System in den Dunkelmodus versetzt hat.

Schritt 2: Custom Properties auf Ihre Stile anwenden

Wenden Sie als Nächstes diese Custom Properties auf Ihre CSS-Stile an, um das Erscheinungsbild Ihrer Website-Elemente zu steuern.


body {
  background-color: var(--background-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s; /* Weicher Übergang */
}

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

button {
  background-color: var(--button-background-color);
  color: var(--button-text-color);
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

Hier verwenden wir die var()-Funktion, um auf die Werte unserer Custom Properties zuzugreifen. Wir haben auch eine transition-Eigenschaft zum body-Element hinzugefügt, um einen sanften Übergang zwischen den Themes zu erzeugen.

Schritt 3: Testen und Verfeinern

Testen Sie Ihre Implementierung gründlich in verschiedenen Browsern und Betriebssystemen. Moderne Browser wie Chrome, Firefox, Safari und Edge unterstützen die prefers-color-scheme Media-Query vollständig. Sie können in den Einstellungen Ihres Betriebssystems zwischen hellem und dunklem Modus wechseln, um die Änderungen auf Ihrer Website zu sehen.

Fortgeschrittene Techniken und Überlegungen

Bereitstellung eines manuellen Theme-Umschalters

Obwohl die automatische Theme-Anpassung ein großartiger Ausgangspunkt ist, möchten einige Benutzer möglicherweise ihre Systemeinstellungen manuell überschreiben. Sie können einen manuellen Theme-Umschalter mit JavaScript und Local Storage bereitstellen.

HTML:

JavaScript:


const themeToggle = document.getElementById('theme-toggle');
const body = document.body;

let currentTheme = localStorage.getItem('theme') || 'auto'; // Standardmäßig auf auto

function setTheme(theme) {
  if (theme === 'dark') {
    body.classList.add('dark-theme');
    body.classList.remove('light-theme');
  } else if (theme === 'light') {
    body.classList.add('light-theme');
    body.classList.remove('dark-theme');
  } else {
    body.classList.remove('light-theme', 'dark-theme');
  }
  localStorage.setItem('theme', theme);
  currentTheme = theme;
}

// Anfängliches Theme beim Laden der Seite anwenden
if (currentTheme === 'dark') {
  setTheme('dark');
} else if (currentTheme === 'light') {
  setTheme('light');
} else {
  //Wenn auf auto gesetzt, entscheidet prefers-color-scheme
}


themeToggle.addEventListener('click', () => {
    if (currentTheme === 'auto'){
        setTheme('light');
    } else if (currentTheme === 'light') {
        setTheme('dark');
    } else {
        setTheme('auto');
    }
});

CSS: Fügen Sie das folgende CSS zusammen mit dem vorherigen CSS hinzu. Beachten Sie die manuelle Überschreibung:


body.light-theme {
  --background-color: #ffffff; /* Hintergrund helles Theme */
  --text-color: #000000; /* Text helles Theme */
  --link-color: #007bff; /* Link helles Theme */
  --button-background-color: #f0f0f0;
  --button-text-color: #000;
}

body.dark-theme {
  --background-color: #121212; /* Hintergrund dunkles Theme */
  --text-color: #ffffff; /* Text dunkles Theme */
  --link-color: #66b3ff; /* Link dunkles Theme */
  --button-background-color: #333;
  --button-text-color: #fff;
}

Dieses Code-Snippet fügt einen Button hinzu, mit dem Benutzer zwischen hellen, dunklen und automatischen Themes umschalten können. Das ausgewählte Theme wird im Local Storage gespeichert, sodass es über Seitenaufrufe hinweg erhalten bleibt.

Umgang mit Bildern und SVGs

Einige Bilder und SVGs sehen möglicherweise nicht in beiden, hellen und dunklen, Themes gut aus. Sie können CSS-Media-Queries verwenden, um verschiedene Versionen dieser Assets bedingt anzuzeigen.


img.light-mode {
  display: block;
}

img.dark-mode {
  display: none;
}

@media (prefers-color-scheme: dark) {
  img.light-mode {
    display: none;
  }

  img.dark-mode {
    display: block;
  }
}

Dieses Code-Snippet zeigt ein Bild (mit der Klasse light-mode) im hellen Modus und ein anderes Bild (mit der Klasse dark-mode) im dunklen Modus an.

Überlegungen zur Farbpalette für internationale Zielgruppen

Bei der Auswahl von Farbpaletten für Ihre hellen und dunklen Themes sollten Sie kulturelle Assoziationen und Aspekte der Barrierefreiheit berücksichtigen. Hier sind einige allgemeine Richtlinien:

Überlegungen zur Leistung

Obwohl die Implementierung der automatischen Theme-Anpassung relativ unkompliziert ist, ist es wichtig, die potenziellen Auswirkungen auf die Leistung zu berücksichtigen. Vermeiden Sie die Verwendung übermäßig komplexer CSS-Selektoren oder Animationen, die das Rendern verlangsamen können. Stellen Sie außerdem sicher, dass Ihre Custom Properties effizient definiert sind, um den Overhead von Variablen-Lookups zu minimieren.

Hier sind einige bewährte Methoden zur Leistungsoptimierung:

Best Practices für die Barrierefreiheit

Stellen Sie sicher, dass Ihre hellen und dunklen Themes die Richtlinien zur Barrierefreiheit erfüllen, wie z.B. die WCAG (Web Content Accessibility Guidelines). Dazu gehören ein ausreichender Farbkontrast, die Verwendung von semantischem HTML und die Gewährleistung, dass alle interaktiven Elemente per Tastatur zugänglich sind.

Hier sind einige spezifische Best Practices für die Barrierefreiheit, die Sie befolgen sollten:

Beispiele aus verschiedenen Regionen

Betrachten Sie diese Beispiele, wie helle und dunkle Themes auf unterschiedliche globale Zielgruppen zugeschnitten werden können:

Fazit

Die Implementierung automatischer heller und dunkler Themes ist ein entscheidender Schritt zur Schaffung eines zugänglicheren und benutzerfreundlicheren Weberlebnisses für ein globales Publikum. Durch die Nutzung von CSS-Media-Queries und Custom Properties können Sie das Erscheinungsbild Ihrer Website leicht an die Vorlieben der Benutzer anpassen, die Augenbelastung reduzieren und die Zugänglichkeit für Benutzer mit Sehbehinderungen verbessern. Denken Sie daran, kulturelle Assoziationen, Barrierefreiheitsrichtlinien und Leistungsaspekte zu berücksichtigen, um ein nahtloses und inklusives Surferlebnis für alle zu gewährleisten.

Indem Sie diese Techniken anwenden, zeigen Sie Ihr Engagement für moderne Webdesign-Prinzipien und gehen auf die vielfältigen Bedürfnisse Ihres internationalen Publikums ein, wodurch Ihre Website zu einem einladenden und komfortablen Ort für alle wird.