Modo oscuro automático con JavaScript

Una de las funciones más solicitadas en las aplicaciones es el modo oscuro. Para muchos usuarios, el modo oscuro proporciona una interfaz más agradable a la vista con menos tonos blancos que pueden causar fatiga visual. También se sabe que el modo oscuro ahorra batería en las pantallas AMOLED.

A menudo, los diseñadores web usan la prefers-color-schemefunción de medios CSS para proporcionar un tema diferente cuando el modo oscuro está habilitado. prefers-color-schemeobtiene la preferencia del usuario a través de la configuración del sistema operativo o la configuración del agente de usuario. Aquí hay un ejemplo 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;

El modo oscuro es una característica extremadamente útil para la mayoría de los usuarios. Aprovecha el matchMedia()método para brindar una mejor experiencia a tus usuarios.

Si disfrutó de este artículo, también le puede gustar el libro de Faraz Kelhini, Modern Asynchronous JavaScript . Hasta el 15 de mayo de 2022, puede usar el código de promoción fkajs_medium_35 para ahorrar un 35 % en la versión de libro electrónico. Los códigos promocionales no son válidos en compras anteriores.

Artículos de Faraz Kelhini