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;
}
}
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"
}
Comentarios
Having read this I thought it was rather informative. I appreciate you finding the time and effort to put this information together. I once again find myself spending way too much time both reading and commenting. But so what, it was still worthwhile! Neille Man Esmaria
cialis 10 mg
tadalafil dosage – tadalafil citrate generic tadalafil at walmart
canadian pharmacy tadalafil – tadalafil pill buy generic tadalafil online
priligy cost priligy tablets uk