Brad Frost combined 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>?
Let's see it in action:
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.
