How to Dark Mode with Images
Dark Mode is a cool new feature and CSS makes it super easy to implement it on websites, but once you are done reconfiguring all those background and text colors, you have to wonder: what about images?

One way to deal with images in Dark Mode is to reduce their brightness. This works, alas is quite uninspiring. It would be much cooler to have one image for Light Mode and another image for Dark Mode.
While this sounds complex, at least the technical implementation is super easy, thanks to the HTML5 picture tag. Browser support is good, except for Internet Explorer, but you’ll always have a fallback anyhow.
Here is how it works at the most basic level:
All the magic happens inside the <picture> element.
The <source> element is where we declare the media query prefers-color-scheme: dark which tells the browser to load this image if the user is in Dark Mode. We point to the image’s location by putting the image url in srcset.
The other element is just a classic <img>, so you can just use your existing image and place it after <source>. This will be loaded if the user is in Light Mode, has no preference or uses a browser that doesn’t support HTML5 or Dark Mode.
Another cool thing is that only the image that adheres to the user’s light/dark preference gets loaded. The other one will only load, if the transition from light to dark (or vice versa) happens while the user is on the page. This means there is also no unnecessary drain of your servers.
That’s it.
The really hard part will now be to turn all your images on your website into nighttime shots in Photoshop. 🙈
This article is an excerpt of a much longer article we wrote on our company blog where we go into more detail about how to do this with responsive images in WordPress and create blog posts where you can select night images on the backend. Check it out!
