Implementing Dark Mode on adactio.com

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:

1. 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);
     }
   }

2. Using the picture element, and media queries on the various source‘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>

Implementing Dark Mode on adactio.com →