Jeremy recently implemented “Dark Mode” on his site. Tanks to CSS Custom Properties the implementation is pretty straightforward (also see my writeup here).
But of course, Jeremy added some extra details that make the difference:
-
In Dark Mode images are toned down to make ‘m blend in better, as detailed by Melanie Richards:
@media (prefers-color-scheme: dark) { img { filter: brightness(.8) contrast(1.2); } }
-
Using the
picture
element, and media queries on the varioussource
‘s contained, you can ship a dark version of an image (such as map) to the visitor:<picture> <source media="prefers-color-scheme: dark" srcset="https://api.mapbox.com/styles/v1/mapbox/dark-v10/static..."> <img src="https://api.mapbox.com/styles/v1/mapbox/outdoors-v10/static..." alt="map"> </picture>
Leave a comment