Skip to main content

Setting different images for Light & Dark mode

One way of doing it (wrong)โ€‹

  • Using #gh-dark-mode-only for GitHub

<figure>

![Thumbnail.png](/thumbnail.svg#gh-light-mode-only)


</figure>

<figure>

![Thumbnail.png](/thumbnail-white.svg#gh-dark-mode-only)


</figure>
  • 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.

<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>

901660.gif