Cómo detectar el modo oscuro usando JavaScript

Detección del modo oscuro y detección del cambio de modo mediante JavaScript

Usando CSS podemos detectar el modo oscuro usando la prefers-color-schemeconsulta de medios.

Pero… ¿qué pasa si tenemos que usar JavaScript? Hace poco me topé con este problema, porque tenía un código JavaScript que agregaba una imagen a la página, pero quería mostrar una imagen diferente según el modo claro/oscuro.

Aquí te explicamos cómo podemos hacerlo.

Primero, detecta si el matchMediaobjeto existe (de lo contrario, el navegador no admite el modo oscuro y puedes volver al modo claro).

Luego, verifica si está en modo oscuro usando

window.matchMedia('(prefers-color-scheme: dark)').matches

Esto regresará truesi el modo oscuro está habilitado.

Aquí hay un ejemplo completo, donde invierno los colores de una imagen si está en modo oscuro:

const img = document.querySelector('#myimage')if (window.matchMedia      window.matchMedia('(prefers-color-scheme: dark)').matches) {  img.style.filter="invert(100%)";}

Pero hay un problema: ¿qué pasa si el usuario cambia de modo mientras usa nuestro sitio web?

Podemos detectar el cambio de modo usando un detector de eventos, de esta manera:

window.matchMedia('(prefers-color-scheme: dark)')      .addEventListener('change', event = {  if (event.matches) {    //dark mode  } else {    //light mode  }})

Tips para principiantes de JavaScript

Tal vez te puede interesar:

1. Cómo generar un número aleatorio entre dos números en JavaScript
2. Cómo esperar el evento DOM listo en JavaScript simple
3. Cómo determinar si una fecha es hoy en JavaScript
4. Cómo contar el número de propiedades en un objeto JavaScript