I recently published the update website for Elytra. Something I wanted to try was to seamlessly support both Dark and Light mode images using the simplest code snippet.
This is what I ended up with:
The key thing to note for this to work, the source with the
prefers-color-scheme:dark media query must appear first in the list. If you add it anywhere else, it does not work.
I use ES6Views to render all these pages so I can have a function that returns the above struct and all I have to pass it are 3 arguments: The URL, width and alt-text.