How do i style OpenStreetMap like coronavirus.app

Question

Im digging into the world of OpenStreetMap, leaflet and map tiles !
First thing i want is a pretty map for data visualization. Prior experiense with google maps i could style the map client side, but when i search for OpenStreetMap styling it just dont seem possible, and it must be done server side.

How does a side like coranavirus.app do it then ? When i inspect their site i can see they pull the normal OSM png tiles. How does that turn into the light/dark map ?

Any hints would be much appreciated !

Answer 1

If you inspect .leaflet-tile-container you can see that they are using a CSS filter:

:root{
  /* ... */
  --mapfilter: grayscale(1);
  /* ... */
}

/* ... */
html body.dark{
  /* ... */
  --mapfilter: invert(1) grayscale(1);
  /* ... */
}

.map-layer, .leaflet-tile-container {
    filter: var(--mapfilter);
    -webkit-filter: var(--mapfilter);
}