<picture> with prefers-color-scheme media query
Brad Frost combined 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
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.
Have you linked to this page from your site? Submit your URL and it will appear below. Learn more.