Automatischer Dunkelmodus mit JavaScript

Eine der am häufigsten nachgefragten Funktionen in Anwendungen ist der Dunkelmodus. Für viele Benutzer bietet der Dunkelmodus eine augenfreundlichere Benutzeroberfläche mit weniger Weißtönen, die eine Überanstrengung der Augen verursachen können. Der Dunkelmodus ist auch dafür bekannt, die Akkulaufzeit auf AMOLED-Bildschirmen zu verlängern.

Häufig verwenden Webdesigner die prefers-color-schemeCSS-Medienfunktion, um ein anderes Design bereitzustellen, wenn der Dunkelmodus aktiviert ist. prefers-color-schemeerhält die Präferenz des Benutzers über die Betriebssystemeinstellung oder die Benutzeragenteneinstellung. Hier ist ein einfaches Beispiel:

/* Style rules for dark mode */
@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}
/* Style rules for light mode */
@media (prefers-color-scheme: light) {
  body {
    background-color: white;
    color: black;
  }
}

const darkMode = window.matchMedia("(prefers-color-scheme:dark)").matches;

Der Dunkelmodus ist für die meisten Benutzer eine äußerst nützliche Funktion. Nutzen Sie die matchMedia()Methode, um Ihren Benutzern ein besseres Erlebnis zu bieten.

Wenn Ihnen dieser Artikel gefallen hat, gefällt Ihnen vielleicht auch das Buch Modern Asynchronous JavaScript von Faraz Kelhini . Bis zum 15. Mai 2022 können Sie mit dem Promo-Code fkajs_medium_35 35 % auf die E-Book-Version sparen. Aktionscodes gelten nicht für frühere Einkäufe.

Artikel von Faraz Kelhini