DEV Community

Cover image for Light and dark mode image in HTML
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

Light and dark mode image in HTML

Did you know you can change images bases on the user preferred Color-scheme?

This nifty piece of code could already be used in CSS, but did you know it works directly in HTML?

We can detect if the user prefers a dark or light color schema and show a different image to them based on that!

It will look like this:

HTML Prefer color scheme

HTML Structure

<picture>
  <source srcset="dark-mode.png" media="(prefers-color-scheme: dark)">
  <img src="light-image.png">
</picture>
Enter fullscreen mode Exit fullscreen mode

That's is it!

By default, it will show the light image, but it will show the dark image if the person prefers the dark scheme.

Feel free to have a play with this on Codepen.

Browser Support

The support for prefers-color-scheme is getting better, but still not a reliable option to choose.

CSS prefers-color-scheme support

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Discussion (2)

Collapse
waylonwalker profile image
Waylon Walker

Super cool Chris. Nothing worse than discretely browsing the web in the middle of the night in dark mode then an image lights up the room. "sorry everyone, no its not morning it was just an image"

Collapse
dailydevtips1 profile image
Chris Bongers Author

Haha love this explanation! but yes!
Hopefully, we will see more of this in the future.