[UX] Dark mode should change map into Dark Mode as well

[Talie5in]

Dark mode setting should change map into Dark Mode as well, the bright map can cause eye strain when working in darker environments.

[Hunter275]

The map is created using react-map-gl as a wrapper for Mapbox GL JS.

The map images themselves come from OpenStreetMap Carto as a raster as defined in this json file that we use to define our mapStyle:

web/src/pages/Map.tsx

Line 115 in 5fdd07e

mapStyle="https://raw.githubusercontent.com/hc-oss/maplibre-gl-styles/master/styles/osm-mapnik/v8/default.json"

Because the map is a raster it would be difficult to change the look of it, and OpenStreetMap does not offer a dark mode for the map.

[Hunter275]

#33 could possibly solve this

[Talie5in]

Surely we can pull from other maplibre-gl-styles ?

Eg,
https://github.com/teamapps-org/maplibre-gl-styles/blob/main/dark/dark_matter.json
https://github.com/teamapps-org/maplibre-gl-styles/blob/main/dark/dark_theme.json

[Hunter275]

maplibre-gl just styles maps it does not source the map itself.

The source of the map for those two styles is:

    },
    "openmaptiles:version": "3.x",
    "openmaptiles:mapbox:owner": "openmaptiles",
    "openmaptiles:mapbox:source:url": "mapbox://openmaptiles.4qljc88t",
    "maputnik:renderer": "mbgljs"
  },
  "sources": {
    "openmaptiles": {
      "type": "vector",
      "url": "mbtiles://{v3}"
    }
  },

Meaning the map tiles come from Mapbox, which is a paid service. Mapbox is providing their map as a vector which allows for creating custom layers:

{
      "id": "water",
      "type": "fill",
      "source": "openmaptiles",
      "source-layer": "water",
      "filter": ["==", "$type", "Polygon"],
      "layout": {"visibility": "visible"},
      "paint": {"fill-color": "rgba(7, 43, 76, 1)", "fill-antialias": false}
    },

OpenStreetMap is free but their map comes as a raster image instead of a vector so there is no ability for styling.

[KyleMaas]

How about adding a CSS filter: invert(100%) to the map canvas? Trying that on my end, the map looks great.

[Hunter275]

Inverted doesn't look horrible, I agree.

We would need to invert any of the Node icons on the map so they're back to being the correct color.

[Hunter275]

https://meshmap.net/ uses the same hack on their map just with invert(1) hue-rotate(180deg) brightness(1.25)