Comment changer une URL d'image HTML en mode sombre

En utilisant CSS, il est assez facile d'appliquer des modifications si le système est en mode sombre, en utilisant leprefers-color-schemefonction multimédia.

Consultez mon article de blog surmode sombresi vous souhaitez en savoir plus.

Aujourd'hui, je rencontre un problème - comment changer une image définie dans le HTML, plutôt qu'une règle CSS?

Il s'avère qu'il existe un moyen HTML simple de le faire, sans aucun CSS ou JavaScript impliqué.

Nous pouvons utiliser lepictureétiquette pour envelopper leimgétiqueter:

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

Si le mode sombre est pris en charge et activé, ledark.pngl'image sera utilisée comme source pour leimgétiqueter.

La balise est très bien prise en charge, et les anciens navigateurs qui ne l'implémentent pas, ou n'implémentent pas le mode sombre, reviendront à afficher lelight.pngimage.

Il est important de noter que le navigateur ne télécharge pas 2 images, dans tous les cas: s'il est en mode sombre, dans cet exemple il téléchargera simplementdark.pngimage, et si c'est en mode clair, il ne téléchargera quelight.png, il n'y a donc pas de gaspillage de bande passante.

Téléchargez mon gratuitManuel HTML


Plus de tutoriels html: