<picture> with prefers-color-scheme media query

Brad Frost combined picture and the prefers-reduced-motion media query to achieve delightfully simple and effective results. I immediately imagined the possibilites of using media queries that don't relate to the viewport size.

Dark mode imagery

Why not use some other media queries in <picture>?

<picture>
  <source srcset="dark.jpg" media="(prefers-color-scheme: dark)">
  <img src="original.jpg">
</picture>

Let's see it in action:

Try it using your OS preferences for dark mode!

I applied some really minimal dark-mode CSS to this page to help visualize the effect. Maybe having this post public will give me the motivation to clean it up and make it site-wide 😜

The WebKit blog has a similar example in their introductory post on dark mode support.