Dark mode

[Malvoz]

Dark mode experiment doc: https://maps4html.org/experiments/styling/dark-mode/.

Investigate whether authors expect the map UI to have a default color scheme suitable for dark mode experiences (applied conditionally based on user preferences). Styling hooks for customization may rely on https://github.com/Maps4HTML/Web-Map-Custom-Element/issues/497.

[Malvoz]

Out of scope for this issue but thought it'd be worth mentioning:

1. Map data providers may e.g. return dark tiles based on preferences.
2. Authors can also "hack" dark mode styles for tiles, e.g. using styling hooks they can turn this map:

into this:

/* Example CSS filter, inspired by https://github.com/openstreetmap/openstreetmap-website/issues/2332#issuecomment-867821340 */
@media (prefers-color-scheme: dark) {
  .leaflet-tile-pane {
    filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
  }
}