Hace ya varios meses que diferentes sistemas operativos y aplicaciones traen como opcional el dark-mode, donde todo lo claro se ha vuelto oscuro. ¿Moda, accesibilidad? Realmente no he indagado, pero eso trae pequeños problemas en cuanto al uso de navegadores web. Me topé con uno en específico que me llevó a escribir este artículo.

Hechos:

Navegando por Internet y con varios enlaces abiertos, veo que un favicon de color negro apenas se nota en el tab de color gris oscuro.

Pequeño problema pero solucionable. Hay 2 técnicas para detectar el dark-mode en el browser: con CSS y con JS. Veamos ambos códigos:

CSS:

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

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

CSS Dark-mode

JS:

Para hacerlo con JavaScript debes detectar el mismo @media (prefers-color-scheme: dark) para luego retornar true/false y hacer lo que quieras con el DOM:

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

Por ejemplo, en el siguiente código cambiamos el favicon.ico si tiene el modo dark habilitado:

const favicon = document.querySelector('#favicon')
if (window.matchMedia && 
    window.matchMedia('(prefers-color-scheme: dark)').matches) {
  favicon.href="favicon-dark.ico"
}

Dark-mode JS

Links:

• Can I Use: prefers-color-scheme media query
• How to detect dark mode using JavaScript