Überschreiben der nativen Farbschema-Einstellung

Die Implementierung dunkler Modi ist mit der weit verbreiteten Akzeptanz auf verschiedenen Betriebssystemen von entscheidender Bedeutung geworden. Obwohl native Browserunterstützung durch die CSS-Medienregel @media (prefers-color-scheme: dark) vorhanden ist, geht sie möglicherweise nicht vollständig auf Benutzerpräferenzen ein oder berücksichtigt nicht unterstützte Browser wie Microsoft Edge.

Entkopplung der Systemeinstellungen aus dem Website-Design

Um eine optimale Benutzerkontrolle zu gewährleisten, ist es wichtig, Benutzern die Möglichkeit zu geben, die Farbschemaeinstellungen des Systems zu überschreiben. Dadurch wird sichergestellt, dass sie das Thema auswählen können, das sie für eine bestimmte Website bevorzugen. Um dies zu erreichen, wird eine Kombination aus CSS-Variablen und JavaScript verwendet.

CSS-Konfiguration

CSS-Variablen definieren die Theme-Parameter:

:root {
  --font-color: #000;
  --link-color: #1C75B9;
  --link-white-color: #fff;
  --bg-color: rgb(243,243,243);
}

[data-theme="dark"] {
  --font-color: #c1bfbd;
  --link-color: #0a86da;
  --link-white-color: #c1bfbd;
  --bg-color: #333;
}

Variablen werden im gesamten Stylesheet verwendet, um Flexibilität zu gewährleisten:

body {
  color: #000;
  color: var(--font-color);
  background: rgb(243,243,243);
  background: var(--bg-color);
}

JavaScript-Implementierung

JavaScript spielt eine entscheidende Rolle bei der Erkennung von Benutzerpräferenzen und dem Umschalten zwischen Themen:

function detectColorScheme() {
  let theme = "light";

  if (localStorage.getItem("theme") == "dark") {
    theme = "dark";
  } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
    theme = "dark";
  }

  if (theme == "dark") {
    document.documentElement.setAttribute("data-theme", "dark");
  }
}

detectColorScheme();

Die toggleTheme-Funktion übernimmt den Themenwechsel:

function switchTheme(e) {
  if (e.target.checked) {
    localStorage.setItem('theme', 'dark');
    document.documentElement.setAttribute('data-theme', 'dark');
  } else {
    localStorage.setItem('theme', 'light');
    document.documentElement.setAttribute('data-theme', 'light');
  }  
}

Dieses JavaScript gewährleistet die automatische Theme-Erkennung und ermöglicht es Benutzern, es mit einem Kontrollkästchen zu überschreiben:

Fazit

Durch die Kombination von CSS-Variablen und JavaScript geben wir Benutzern die Möglichkeit, das Farbschema einer Website unabhängig von ihren Systemeinstellungen zu steuern . Dieser Ansatz gewährleistet ein verbessertes Benutzererlebnis und geht auf individuelle Vorlieben und die Einschränkungen verschiedener Browser ein.