Combining <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:

<picture> element with a prefers-color-scheme media query.

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.

Have you linked to this page from your site? Submit the URL here and it will appear in the list below: