Mode sombre automatique avec JavaScript

L'une des fonctionnalités les plus demandées dans les applications est le mode sombre. Pour de nombreux utilisateurs, le mode sombre offre une interface plus conviviale avec moins de tons blancs qui peuvent provoquer une fatigue oculaire. Le mode sombre est également connu pour économiser la batterie sur les écrans AMOLED.

Souvent, les concepteurs Web utilisent la prefers-color-schemefonctionnalité multimédia CSS pour fournir un thème différent lorsque le mode sombre est activé. prefers-color-schemeobtient la préférence de l'utilisateur via le paramètre du système d'exploitation ou le paramètre de l'agent utilisateur. Voici un exemple simple :

/* 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;

Le mode sombre est une fonctionnalité extrêmement utile pour la plupart des utilisateurs. Profitez de la matchMedia()méthode pour offrir une meilleure expérience à vos utilisateurs.

Si vous avez apprécié cet article, vous aimerez peut-être aussi le livre de Faraz Kelhini, Modern Asynchronous JavaScript . Jusqu'au 15 mai 2022, vous pouvez utiliser le code promotionnel fkajs_medium_35 pour économiser 35 % sur la version ebook. Les codes promotionnels ne sont pas valables sur les achats antérieurs.

Articles de Faraz Kelhini