Usando CSS es bastante fácil aplicar cambios si el sistema está en modo oscuro, usando la prefers-color-scheme
funció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 picture
etiqueta para envolver la img
etiqueta:
picture source media="(prefers-color-scheme: dark)" img src="light.png"/picture
Si el modo oscuro es compatible y está habilitado, la dark.png
imagen se utilizará como fuente para la img
etiqueta.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.png
imagen.
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.png
imagen, 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:
- Formularios HTML
- Cómo escribir texto en un lienzo HTML
- Cómo cargar una imagen en un lienzo HTML
- 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