Themes and colour tokens

View .md

A theme is a palette of 36 colour tokens. The server draws the map with them and the browser draws markers, popups and controls with them, so the still image and the live map always match.

Pick a theme, then override any token:

<instant-map theme="midnight" colors="accent:ff5a5f,cluster:ff5a5f"></instant-map>

map.theme = "paper";
map.colors = { water: "#9fd3ff", accent: "#ff5a5f" };

staticUrl({ center, zoom, width, height, theme: "mono", colors: { accent: "#0a6fd6" } });

Colours are #rrggbb or #rrggbbaa. In the colors attribute and the URL, leave out the #.

Changing the theme or colours on a live map reloads the tiles in the new colours.

Tokens

Token	Paints	`daylight`	`midnight`	`paper`	`mono`
`land`	Background land	`#f3f2ec`	`#161a21`	`#f3f1ec`	`#f4f4f3`
`water`	Oceans, lakes and rivers	`#8ec6ee`	`#0c2a47`	`#d0dee8`	`#dde2e7`
`waterLine`	Shorelines and narrow rivers	`#6fb2e2`	`#1b4670`	`#b9d0e0`	`#c9d0d8`
`waterLabel`	Ocean, lake and bay names	`#2d6c9e`	`#6f9fcc`	`#5f849f`	`#6b7480`
`park`	Parks, forests and grass	`#c3e4b4`	`#14281d`	`#e3ead9`	`#e9ece8`
`landuse`	Schools, hospitals, industrial areas, airports	`#ecebe3`	`#191e26`	`#eceae5`	`#efefee`
`sand`	Beaches and sand	`#f3e7c6`	`#1c1b17`	`#f1ece0`	`#f1f0ec`
`building`	Building footprints (zoom 14+)	`#e2dfd5`	`#1e242e`	`#e4e0d8`	`#e6e6e4`
`road`	Minor road fill	`#ffffff`	`#252c37`	`#ffffff`	`#ffffff`
`roadCasing`	Minor road outline	`#d8d2c6`	`#161a21`	`#dfd9cf`	`#dededc`
`majorRoad`	Major road fill	`#ffffff`	`#333d4c`	`#ffffff`	`#ffffff`
`majorRoadCasing`	Major road outline	`#cbc3b4`	`#161a21`	`#d2cbc0`	`#d2d2cf`
`highway`	Highway fill	`#ffd27a`	`#6e6043`	`#ecdcbd`	`#ffffff`
`highwayCasing`	Highway outline	`#dea543`	`#1b1d22`	`#b3a790`	`#bdbdb9`
`rail`	Railways	`#cbc7c0`	`#2a313c`	`#d6d1c9`	`#d0d0cd`
`path`	Footpaths and cycleways	`#e5e1da`	`#1d232c`	`#e2ddd5`	`#e4e4e2`
`boundary`	State and province borders	`#bdb6c8`	`#3d4656`	`#c9c1b4`	`#c4c4c0`
`countryBoundary`	Country borders	`#9a93a8`	`#5a6479`	`#9d9384`	`#9a9a96`
`label`	City names	`#1c2530`	`#e2e7ee`	`#3d3a35`	`#2b2b2b`
`labelMinor`	Town names	`#4d5763`	`#9ba5b3`	`#7a756d`	`#6a6a6a`
`labelHalo`	Outline behind every label	`#ffffff`	`#161a21`	`#f3f1ec`	`#ffffff`
`neighbourhood`	Neighbourhood names	`#6b7480`	`#7e8896`	`#857f75`	`#828282`
`region`	State and region names	`#8b8794`	`#6d7786`	`#9a948a`	`#8f8f8f`
`shield`	Road shield fill	`#ffffff`	`#333d4c`	`#ffffff`	`#ffffff`
`shieldText`	Road shield number	`#3f434a`	`#c9d1dc`	`#5c564e`	`#4a4a4a`
`shieldLine`	Road shield outline	`#c9c3b8`	`#3b485b`	`#bdb6aa`	`#c4c4c0`
`interstate`	Interstate shield fill	`#3d4b63`	`#3a6ea5`	`#4a5563`	`#4a4a4a`
`interstateText`	Interstate shield number	`#ffffff`	`#ffffff`	`#ffffff`	`#ffffff`
`marker`	Marker pill fill and dot ring	`#0f2233`	`#eef3f1`	`#1d2b3a`	`#0f2233`
`markerText`	Marker pill text	`#ffffff`	`#0f2233`	`#ffffff`	`#ffffff`
`accent`	Dots without a label, focus rings	`#0f2233`	`#19d3a2`	`#1d2b3a`	`#0f2233`
`cluster`	Cluster bubble	`#0f2233`	`#19d3a2`	`#1d2b3a`	`#0f2233`
`clusterText`	Cluster count	`#ffffff`	`#0f2233`	`#ffffff`	`#ffffff`
`selected`	Selected and hovered marker	`#19d3a2`	`#ffd27a`	`#f0b429`	`#19d3a2`
`selectedText`	Selected marker text	`#0f2233`	`#2a1a00`	`#2a1a00`	`#0f2233`
`shadow`	Marker and popup shadow (with alpha)	`#0000004d`	`#00000099`	`#2b24184d`	`#00000040`