Cómo cambiar la imagen html en modo oscuro

Cómo cambiar la imagen html en modo oscuro

Aprenda a cambiar la imagen html src en modo oscuro.

Normalmente usamos el prefers-color-scheme función css media para detectar si un sistema de usuario está en modo claro u oscuro.

Para cambiar la imagen a modo oscuro, podemos usar el <picture> etiqueta en html.

Ejemplo:

<picture>
  <source
    srcset="dark.png"
    media="(prefers-color-scheme: dark)">  <img src="default.png" alt= "moving car">
</picture>

Si el sistema del usuario está en modo oscuro dark.png se usa la imagen, de lo contrario default.png se usa la imagen.

Nota: El navegador solo descargará una de estas imágenes en función de la prefers-color-scheme. Para que no haya ancho de banda desperdiciado.

Si quieres conocer otros artículos parecidos a Cómo cambiar la imagen html en modo oscuro puedes visitar la categoría Tutoriales.

Deja un comentario

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

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas