Dezine Zync

The personal blog of Nikhil Nigade

Dark Mode Images

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.