Changer le favicon en mode sombre

Comment afficher un autre favicon en mode sombre ou clair

J'ai configuré mon Mac pour basculer automatiquement entre les modes sombre et clair.

J'ai commencé à créer un nouveau site Web quand j'ai réalisé à un moment donné que j'avais mis une image blanche comme favicon, et en mode clair, c'était presque invisible!

J'ai donc commencé à étudier les moyens d'ajouter un favicon en mode sombre et un autre en mode clair.

Il s'avère qu'il n'y a pas (encore) de moyen de le faire pour les images bitmap PNG / JPG, mais nous pouvons utiliser unSVGastuce d'images vectorielles pour cela.

Nous pouvons intégrer du CSS dans une image SVG.

Si l'image est suffisamment simple pour que l'on puisse identifier une couleur et la changer en mode sombre, on peut avoir une couleur différente pour les 2 modes.

J'ai utilisé cette astuce surhttps://prototyped.dev(vous pouvez vérifier comment le favicon change).

Voici le SVG que j'ai utilisé comme favicon:

<svg width="37" height="45" viewBox="0 0 37 45" fill="none" xmlns="http://www.w3.org/2000/svg">
  <style>
    path {
      fill: #ccc;
    }
    @media (prefers-color-scheme: dark) {
      path {
          fill: #fff;
      }
    }
  </style>
  <path fill-rule="evenodd" clip-rule="evenodd" d="M31.8831 2.04389C25.2462 2.72205 20 11.1737 20 21.5C20 32.2696 25.7062 41 32.7451 41C33.9877 41 35.2047 40.7279 36.3664 40.2206C32.5452 43.2149 27.7311 45 22.5 45C10.0736 45 0 34.9264 0 22.5C0 10.0736 10.0736 0 22.5 0C25.849 0 29.0271 0.731675 31.8831 2.04389Z" />
</svg>

L'image SVG est très simple, c'est une demi-lune que j'ai conçue dans Figma et exportée au format SVG.

Ensuite, j'ai rempli la couleur du chemin avec le#ccccouleur en mode clair, et#fffen mode sombre.

Je l'ai sauvegardé en tant que.svgfichier, puis l'a utilisé commefavicon à Gatsby.

Téléchargez mon gratuitManuel HTML


Plus de tutoriels html: