Has anyone managed to get the solution on StackOverflow to work? I tried and toggling the theme doesn't result in the image changing.

	<picture>
		<source media="(prefers-color-scheme: dark)" srcset="/buy-in-shop-dark.svg">
		<source media="(prefers-color-scheme: light)" srcset="/buy-in-shop-light.svg">
		<img src="/buy-in-shop-light.svg" alt="Buy in the shop" title="Buy in the shop" />
	</picture>

check out MDN's example, and used the "play" feature to mess around with it: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme#result

this is supported by all major browsers and should work https://caniuse.com/prefers-color-scheme

This solution doesn't swap the image when the user presses the dark / light toggle in the footer.

To swap along with the toggle I am using the same approach the navbar logo uses (Tailwind classes):

<img
    src="img/stacktide-hybrid-arch.svg"
    class="hx:block hx:dark:hidden"
/>
<img
    src="img/stacktide-hybrid-arch-dark.svg"
    class="hx:hidden hx:dark:block"
/>

It would be nice to have a shortcode for this.

Edit: the approach I am using has the drawback that is always loads two copies of the image. There might be a way to combine the two approaches, but I'm not sure how to write the media query to work with Tailwind's dark mode.