Cómo cambiar la URL de una imagen HTML en modo oscuro

Usando CSS es bastante fácil aplicar cambios si el sistema está en modo oscuro, usando la prefers-color-schemefunción de medios.

Consulta mi publicación de blog sobre el modo oscuro si quieres obtener más información al respecto.

Hoy me encontré con un problema: ¿cómo cambiar una imagen definida en HTML, en lugar de una regla CSS?

Resulta que hay una forma HTML sencilla de hacerlo, sin necesidad de CSS o JavaScript.

Podemos usar la pictureetiqueta para envolver la imgetiqueta:

picture source media="(prefers-color-scheme: dark)" img src="light.png"/picture

Si el modo oscuro es compatible y está habilitado, la dark.pngimagen se utilizará como fuente para la imgetiqueta.Te recomendamos Filtros de Agua

La etiqueta está muy bien soportada y los navegadores antiguos que no la implementan, o no implementan el modo oscuro, volverán a mostrar la light.pngimagen.

Es importante tener en cuenta que el navegador no descarga 2 imágenes, en ningún caso: si es modo oscuro, en este ejemplo solo descargará la dark.pngimagen, y si es modo claro, descargará solo light.png, por lo que no hay desperdicio de ancho de banda.

Tips de HTML

Tal vez te puede interesar:

1. Formularios HTML
2. Cómo escribir texto en un lienzo HTML
3. Cómo cargar una imagen en un lienzo HTML
4. Cómo utilizar insertAdjacentHTML

Cómo cambiar la URL de una imagen HTML en modo oscuro

Usando CSS es bastante fácil aplicar cambios si el sistema está en modo oscuro, usando la prefers-color-schemefunción de medios.

programar

es

2025-01-10

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente