Cartography for dark mode

[gravitystorm]

This is a followup discussion for #4712

Dark mode cartography is a tricky subject. Unlike the rest of the site, the colours used on the maps:

a) are not under our control
b) are under the control of different groups of cartographers on a per-layer basis
c) are generally extremely carefully chosen
d) are often very close to one another, with significant meaning often between similar colours

"Dark Modes" in general are also tricky, because they are more complex than they might first seem. For example, the text and background colours are generally inverted (black text on white background becomes white text on black background) and not just "darkened" as the mode name might suggest (which would be very black text on a grey background). But that's not the end of the story either, since the inversion is not symmetric - white (or very light grey) text on a black background is hard to read, so the inversion needs to be adjusted for human perception reasons. Here's the values chosen by Bootstrap:

	Light Mode	Dark Mode
text	gray-900	gray-300
background	white	gray-900

But even then, not all colours are even inverted in dark mode. You can see with the example dropdowns on the Bootstrap documentation that the primary colour highlighting is exactly the same - even the brightness is unchanged: https://getbootstrap.com/docs/5.3/customize/color-modes/#example

The final aspect is on human colour perception. There are certain colours (e.g. yellow) that appear brighter for the same brightness value in RGB, and there are ranges of the colour spectrum where humans can distinguish colours more easily (e.g. 10% brightness differences are hard to distinguish in very dark colours, and bright colours are easier to separate from each other than dark ones). This means that mechanical changes to brightness or naive inversions could make the cartography illegible. The work that went into CartoCSS to support HSLUV colour definitions and perceptual colour functions can provide illustrative background information.

---

So what should we do about the maps? I can see 3 main options:

1. Leave it to the cartographers
2. Use a simple darken
3. Use inversion+rotation

1) Leave it to the cartographers

We might decide that the best approach is to leave the decisions about dark modes entirely to the cartographers. This would mean that we use dark mode variants of the map layer when they are available (e.g. Transport Dark. This has the advantage that it allows cartographers to e.g. avoid hard-to-read pure-white text on dark backgrounds, ensure that e.g. landuse colours are not too similar for human perception reasons, or make bug fixes for specific colour problems etc. The major disadvantage is that few layers have yet offered dark modes, and doing so can be a lot of work for these projects.

2) Use a simple darken

This was implemented in #4712 and has the advantage of being straightfoward - it keeps the colours mostly the same, and just tones down the brightness. But this changes the separation between the colours, i.e. reduces the contrast, which can make it harder to read. It is also done in RGB colour space, and not a perceptual colour space, so darkening different colours by the same percentage can lead to different changes in perceived brightness.

3) Use an inversion and a rotation

This is commonly suggested as an automatic way to make a dark mode for the maps, while making sure that colours remain recongisable. The inversion makes bright areas dark and dark ones bright, but since it works on a per-colour-channel basis also changes the colours by 180 degrees on the colour wheel, so the rotation corrects for that. It has the advantage of retaining contrast and colours. However, because both steps are done in RGB colour space, and not a perceptual colour space, this has the same problems as described before.

---

I'm particularly interested in hearing from any cartographers who have had to solve this problem in production on other sites, particularly if they used a different approach from the above.

Overall I don't yet have a clear answer, but I'm in general reluctant to take the control of something so important to cartography out of the hands of the cartographers!

[AntonKhorev]

Option 1 is usually not available. The choice is between (different degrees of) 2 and 3. 2 is no more taking control than adjusting the brightness of your monitor (does it happen in "in RGB colour space"?).

[pnorman]

We should absolutely doing 1 when there are dark mode variants. Where there aren't is what's harder to decide on.