Add dark mode using CSS 'filter: invert hue-rotate' trick

[jake-low]

This is a quick and dirty hack to support a dark mode style on americanamap.org. It uses a CSS filter to invert and hue-rotate the default style.

Here's an example screenshot showing the effect.

[wmisener]

Heh nice work putting this together so fast, given the recent developments on the OSM.org website. IMO this would be a fun feature for Americana to have. However, given the consternation the addition of dark mode on osm.org has caused, I feel like we might want to add this from the get-go as a toggle-able option rather than solely based on user-browser defaults.

Cartographically, this certainly looks pretty cool at first glance, and I think the raw filter works pretty well for our road line, POI, and landuse polygon layers. A few features give me pause though. First off, given the project's faithfulness to shields, inverting their colors so that they no longer closely resemble the signs is certainly a strong choice. I think I'd prefer if the shields were not inverted, but it's not a hill I'd die on.

Relatedly, while most of the colors have been made brighter by the inversion (the freeway red especially transforms to quite the hot pink), the yellows get washed out to a muddy brown. This substantially dims the toll roads and makes any yellow shields pretty weird-looking.

To illustrate, compare Wichita, KS in light and dark mode. In my opinion, the water and roads look pretty good. But the perky sunflower state route shields are now dark brown (maybe there was a drought?), the interstate shields are a strange color balance, with black numbers and sky blue background, and the US route shields are white number on black background (maybe kinda cool?). The Kansas Turnpike toll road in the SE loses a lot of prominence, and its logo looks substantially different too.

POIs seem OK to me, since their exact color shadings don't mean anything intrinsically.

Another weirdness is that the shading fill inside expressways seems to be nearly invisible now, so the casing with black fill almost makes each way look like two parallel roads.

[jake-low]

Thanks for taking a thorough look at this! I totally agree with the issues you pointed out. For context, this PR was inspired by an exchange I had with @1ec5 on Slack. My original intent was just to offer some design inspiration but Minh said I should feel free to open a PR, so I did.

I wasn't aware of the feedback osm.org recieved after they enabled dark mode, but given that it does seem like a good idea to add a toggle to the UI on the website so that users can override their OS-wide preference if they don't want a dark mode version of the map.

Anyway, point is I will not be at all disappointed if you choose not to merge this. 🙂 Feel free to instead use it as a starting point from which to design an actual dark-mode variant of the stylesheet (so that individual colors can be tweaked further) if you decide to add dark mode support to Americana in the future.

[1ec5]

I hadn’t considered the shields, but that’s a good point, as well as adding a toggle like nsi.guide has. My sense was just that this would be a placeholder for something more considered, even if disabled by default for now.

Unlike the raster styles on osm.org, we don’t really need to rely on CSS filter hacks in the longer term. Almost all the colors are defined in src/constants/color.js, so we’d muck up that file to vary the constants by light or dark mode. This gives us the option to be more selective in our color adjustments.

[wmisener]

My original intent was just to offer some design inspiration but Minh said I should feel free to open a PR, so I did.

Feel free to instead use it as a starting point from which to design an actual dark-mode variant of the stylesheet (so that individual colors can be tweaked further) if you decide to add dark mode support to Americana in the future.

Thanks for doing so! I think this is a really nice proof of concept. Even with a simple transformation formula, you showed that you can really get most of the way there on a reasonable-looking dark-variant. The things I pointed out are just tweaks around the edges, which as Minh said can be addressed by manually modifying the color files I think. But what you've done gives a great starting point.