Detectar dark-mode en browsers

16/Sep/2020 118

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.

Detectar dark-mode en browsers

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:

Comentarios

  1. tadalafil side effects [#]

    vidalista tadalafil reviews tadalafil vs cialis reviews tadalafil troche

  2. cialis [#]

    tadalafil vs cialis reviews buy cialis pills tadalafil medication

  3. Iuzvvx [#]

    how to purchase viagra in india – discount viagra 100mg buy cheap viagra tablets

  4. Ywthzh [#]

    price of viagra 100mg uk – purchasing viagra in usa sildenafil generic no prescription

  5. Oduiuy [#]

    generic vardenafil review – want to buy vardenafil vardenafil generic date

  6. Fadkix [#]

    how long does vardenafil take to work – cheap generic vardenafil professional vardenafil 10mg

  7. Bjjfgc [#]

    indian generic vardenafil – buy vardenafil canada levitra cost

  8. Pgtjls [#]

    buy cheap generic vardenafil – where to buy vardenafil in canada order vardenafil 30 pills

  9. Diwmxq [#]

    where can i buy stromectol – stromectol tablets for humans for sale stromectol tablets buy online

  10. Okmvwu [#]

    ivermectin 9mg – ivermectin tablets ivermectin 3mg tab

  11. Lbhnld [#]

    how to safely order viagra online – buy viagra super active sildenafil-citrate

  12. Hjsahv [#]

    viagra medicine – chewable sildenafil viagra for sale online in canada

  13. Wwbvzi [#]

    cialis in mexico over the counter – cheap cialis 60 mg canada discount pharmacy

  14. Ihxgis [#]

    cialis 75 mg – cialis online 20mg buy online tadalafil

  15. pharmaceptica.com [#]

    sildenafil soft tabs generic https://pharmaceptica.com/

  16. Xluckx [#]

    prednisone 4mg – prednisone brand name canada cost of prednisone 10 mg tablet

  17. Mwwmcs [#]

    where to buy prednisone over the counter – prednisone 20 mg price india prednisone prescription for sale

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

CSSLab