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.

I recently posted a Twitter Thread about completing 10 years working professionally, making websites, iOS & iPadOS apps. 

During those 10 years, I learnt a lot. My entire career’s catalyst has been and will continue to be blogs by some wonderful folks. 

Keeping with cycle of reading and writing, I’ve decided to dedicate some time (at-least a couple of times a week to begin with) to writing on my blog. This blog. So hello there, it’s nice to meet you.