Over on my States I’ve been to page, I have my flight stats in the form of a passport. This is a image exported from Flighty, the flight tracker I use.

As a bit of fun, Flighty has a regular version, and a blacklight version. You get the choice of which one you want to export.

I wanted to have both on my /states page. As they both look really cool. So I did some digging. How can I have the images switch, depending on if the readers browser is in light, or dark mode.

After some searching, I found a bit of HTML that looked like it would do what I wanted.

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

After implementing it, it worked! And it looks really good as well.