Setting different images for Light & Dark mode · cho.sh

Setting different images for Light & Dark mode

Warning

This post is more than a year old. Information may be outdated.

Lesser Known Trick

One way of doing it (wrong)

Using #gh-dark-mode-only for GitHub

This does not scale and does not work outside of GitHub

The proper way

Using preferred color scheme CSS property and HTML Picture srcset property.

Backlinks2

Lesser Known Tricks 221021

Comments

<a title="Simple Analytics" href="" referrerpolicy="origin" target="_blank">
  <picture>
    <source
      media="(prefers-color-scheme: dark)"
      srcset="https://simpleanalyticsbadges.com/cho.sh?mode=dark"
    />
    <img
      src="https://simpleanalyticsbadges.com/cho.sh"
      loading="lazy"
      referrerpolicy="no-referrer"
      crossorigin="anonymous"
    />
  </picture>
</a>