_**Note:** This article is cross-posted from my blog: https://rhyslloyd.me/serve-dark-mode-images-natively/_ More and more websites, particularly technical blogs, are leveraging the _prefers-color-scheme_ media query to provide a dark or light theme based on the user's OS preferences. I think this is _brilliant_. Personally, I like to dark-mode **all the things**, so this works for me. That said, when it comes to images (particularly screenshots), I find a white image in a dark theme can be quite jarring. _[My eyes! The goggles do nothing!](https://media.giphy.com/media/VKVDU8pvi3w4w/giphy.gif)_ _What if we could present different images tailored for a user's dark (or light) preferences?_

Well, it turns out we can! _Natively_. That's right! No JavaScript, no CSS wizardry, just good ol' plain ol' **native HTML**. _"I've seen enough, [gimmie the code already](#tldr-sandbox-demo)!"_ ## The `prefers-color-scheme` media feature This media feature is relatively new to browsers ([landed in Firefox](https://hacks.mozilla.org/2019/05/firefox-67-dark-mode-css-webrender/) in May 2019) and seems to be spreading like a locust plague as those of us on the dark side clamber for some of that dark-mode goodness. The team at [MDN describe](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) it more succinctly: > _"The prefers-color-scheme CSS media feature is used to detect if the user has requested the system use a light or dark color theme."_ _A very basic demonstration of a `prefers-color-scheme` media query:_ ```css body { /* Default Light Scheme */ color: black; background: hsl(0, 0%, 85%); } @media (prefers-color-scheme: dark) { body { /* Lovely moody Dark Scheme */ color: white; background: hsl(0, 0%, 15%); } } ``` ## The `

justrhysism

Serve 'Dark Mode' Images Natively

Join Our Newsletter. No Spam, Only the good stuff.