We’ve made a lot of dark maps over the years at Stamen. We’ll often see dark maps from other designers or commercial providers and think, “why so dark?” We have a philosophy around designing a dark map for a particular client or use case, but we haven’t ever really spelled it out – either internally at Stamen or with the larger cartography community. It’s always been very, “it’s hard to describe, but I know it when I see it,” which is not the most useful! See one of our first conversations about this blog post idea:

“I feel like we need to write a blog post about our philosophy about making dark mode map styles. Primarily because it would force us to articulate a philosophy about it! Especially the fundamental contradiction between making "night mode" maps vs "daytime dark mode" maps which we never really talk about. And I'd like to spend more time thinking about how we would actually test our contrast levels and compare them with other dark maps out there”

— One of us, in Slack, a while ago

After much discussion between Stamen cartographers Alan (team Light Mode all the way) and Kelsey (who balances the yin-yang of Dark Mode on her computer and Light Mode on her phone), this is our philosophy of Dark Mode Maps.

Alan (Luke) and Kelsey (Vader) representing the light side and the dark side

In this blog post, we will talk about how we think of the design process for creating dark mode maps, look at some examples from Stamen dark maps over the years (including a couple we launched just last month), and use some fancy scatterplots to visualize the color palettes from other dark mode basemaps available on the internet.

Kelsey also just presented a version of this material at the NACIS Annual Meeting in Louisville in October, and as soon as the videos from that conference are available online, we’ll embed a link here. Our slides from this talk are available here.

What does it mean for a map to be “dark”?

So, what do we mean when we talk about “dark” maps? It used to be, in the distant past of web maps (say, 10 years ago 🙂), that dark basemaps were rare, and cartographers only made the effort to design one if there was a very clear, specific use case for it. But by default, most maps were generally on the lighter side, just like most computer applications and web pages also tended to have light backgrounds. But in more recent years, computers and phones began allowing users to choose whether they wanted a dark or light experience, and by 2019 dark mode was the “tech trend du jour” according to Wired.

Apple’s options for light or dark mode desktop interface

With all of these dark interfaces available, cartographers needed to keep up with the trend: more and more clients wanted a dark version of their maps, and these new dark maps adopted more of the same visual language as dark interfaces. But as the choice to switch to dark mode is now frequently in the hands of users as a matter of preference–rather than in the hands of the website designer making the decision about whether a light or dark style is most suitable for the purpose of the site or app–it has become more difficult to know when a dark map design is successful or not.

In particular, most people don’t know when they’re asking for a dark map whether they want “night mode” (low contrast) or “daytime dark mode” (high contrast). They’re actually very different use cases, and it can be difficult to design a dark map that works well in both settings. We’ll talk about this a lot more later on.

Basically, for a dark map that is meant to be used in low light environments, it needs to be fairly low contrast. For a navigation map in particular, when you’re driving at night you don’t want a very dark map with bright elements…it is a safety hazard! Many computer screens will automatically adjust the display brightness somewhat based on ambient conditions, but in car navigation displays, the interface will usually switch entirely from a light mode map to a dark mode map as needed, if one is available. A dark mode map optimized for low light settings (call it a “night mode” map perhaps) may be difficult to read if you try to use it in the daytime.

Classic example of Google Maps’ night mode from a few years ago

For those who want to use a dark mode style in the day, some might be doing it for energy-saving reasons, while others might prefer it because they find that looking at a darker screen causes less eye strain (although there is some research that for some people dark screens will cause more eye strain and difficulty in seeing detail). Dark mode maps that need to work during the day need to be more high-contrast, and might even be “too bright” to use at night.

Elliott really should be using a dark mode here! (as seen in Mr. Robot)

In many cases, people like dark mode interfaces just because it looks cool. In some ways, this preference for dark mode predates computers by centuries! “In ancient and medieval times, [a light-on-dark color scheme] was used in high status luxury books” according to Wikipedia.

As in ancient and medieval times, so it is today: objects that are harder to make or harder to obtain are inherently more valuable, more desirable, more prestigious. Whether or not you think those medieval light-on-dark illuminated manuscripts inherently look cool, they have a natural cachet if only because they are rarer and require more skill to create. Dare we make the claim that the same is true for dark mode maps?

Old-school dark mode illuminated manuscript in a “black book of hours” circa 1458

The Dark Mode Design Process

While it might seem at first that making a dark mode map should be easy, as simple as flipping a switch, it is a lot trickier than that.

Okay, sure, you could just invert your map, and there are even Chrome plugins that will give you an inverted dark mode Google Map in your browser, but trust us, you don’t want to do that. The results are pretty gross. Blue water becomes a disgusting brown when you naively invert pixel colors, and just, no, please don’t. If you absolutely must have a shortcut to a dark mode map, you need to do an invert and a hue-rotate, as we wrote about in a blog post a few years ago, inspired by a similar example from Esri’s John Nelson.

The Mapbox Outdoors style with invert and hue-rotate applied in CSS

A simple invert and hue-rotate is an interesting experiment, but it’s really just the first step. If you want a really good dark mode map, there are no shortcuts. We would argue that making a good dark mode map is actually harder than making a good light mode map! In this post, we will try to explain a little bit about why that is.

In the earlier days of web maps (roughly the 2000s and 2010s), before dark mode interfaces were common in our computer operating systems and mobile devices, dark mode maps were rare. Cartographers would usually create just one map style at first, typically a pretty colorful one at that (remember early Mapquest or the original Google Maps?). Then you might create a darker map inspired by the original map after-the-fact, only when a use case made it necessary. Sometimes there would be a lightened version of the original map too. Often, the driving motivator to create a lighter and darker version is because the default style is too colorful to use for dataviz overlays.

While this feels like a more old fashioned way of thinking, it still might make sense to work this way for some use cases.

The Past, mostly:

These days, knowing that many users use dark interfaces as their default preference, it makes sense to design our maps from the get-go with a dark mode in mind. Working this way is usually more efficient than doing the dark style later, and we can make sure that the dark mode style is treated with just as much care as the light mode. In this case, there should be no single “default” palette, just one default style that always already has co-equal light and dark options to it.

Because these light and dark mode versions of the same map are designed for general purpose use (not strictly for data visualization overlays), they typically have a wider range of light and dark shades. If a map provider also needs to support data visualization overlays, then usually a separate light and dark set of options are also offered, with more compressed lightness ranges and much less saturation.

The Present, when done right:

But why stop there? It is becoming easier and easier to offer more and more style options for basemaps, since vector maps are rendered on the client side and don’t need to be pre-generated as they were in the days of raster basemaps. Are we at the point where it would make sense to generate two flavors of dark maps for the two dark contexts we discussed earlier: people using a dark interface during the day time (who just want the “dark vibes”) and people who absolutely need a darker map in low-light settings or at night?

Does anyone offer both in the same set of map styles? Not that we’ve seen (yet).

The Future, possibly:

As a cartographic profession, we also collectively may need to come up with better terminology for these two somewhat different map use cases that are both wedged under the umbrella term of “dark”. While we are partial to “Intense Dark”™, it might not fly with the lawyers at the Ghirardelli Chocolate trademark department.

Protomaps, a relatively new mapping player on the scene (but one that has a deep bench of experienced cartographers involved, many Stamen alums included), has an interesting way of naming their palette options. They have a “light” and “dark” colorful style, as expected these days, but also a trio of dataviz styles called “white” (not “light”!), “grayscale”, and “black” (not “dark”!).

We notice that ESRI is also trying something different with the names for their dark mode maps, calling them “Streets (Night)” and “Navigation (Night)”.

These subtle tweaks in terminology make sense, and they helps disentangle some of the muddle of what we mean when talking about dark mode maps… should desaturated dark mode maps for data visualization instead be called “black mode” following the lead of Protomaps? Should both “dark mode” and “night mode” maps be options, following ESRI’s example? Let us know what you think.

Stamen’s first dark map: Midnight Commander

Let’s look at some Stamen dark maps (and some by other cartographers too) and see where they fit in these paradigms.

Stamen’s oldest dark mode basemap (and, we think, one of the first on the web ever) was “Midnight Commander” from 2009, which we designed for Cloudmade, one of the earliest companies that tried to provide commercial map services based on OpenStreetMap data.

Sadly, 2009 is a long time ago, and CloudMade as a company is no longer in business, so the Midnight Commander style no longer exists as a working basemap. Interestingly, though, someone did create a reskinned version of Google Maps using the Midnight Commander palette, so you can get a bit of an idea of what it felt like.

The design brief for Midnight Commander was equal parts fun and function: *“You know, for when you’re Jason Bourne and you’re on the run from the man and you break into the command center and you pull up the secret map interface? That one.” *

Nikki Gunn Rodenbeck used this as one of the patterns in the “Soft Cities” fabric prints of scarves, blankets, etc. It’s important to implement dark mode maps into your seasonal wardrobe! Good to keep this in mind with the end of Daylight Saving Time now upon us here in the U.S…

Note that Midnight Commander was launched as part of a set of styles that also included a colorful reference style called “Fresh” and a lighter style called “Pale Dawn” designed for data overlays such as in Crimespotting. This pattern of three styles– a “main” colorful style and two desaturated light and dark offshoots–exemplifies that “older paradigm” of designing a “colorful” map first (or as the default) with light and dark versions existing as alternatives.

CARTO’s Dark Matter

A bit later on, in 2014, we designed another dark mode map called Dark Matter (along with a light mode sibling called Positron) for CARTO (then called CartoDB).

CARTO is a spatial data analytics platform, and they needed map styles that are very subtle compared to a more general-purpose map. Unlike other map providers like Google or Mapbox who are often (but not exclusively) used as reference maps, CARTO’s maps are always first and foremost for supporting data visualizations on top. It’s a very specific use case, one that demands maps with palettes that get out of the way. This meant we had to use a very desaturated palette so the basemap’s colors wouldn’t clash with any choropleth palettes or color-coded symbols that users selected to display their data. Similarly, the range of lightness in the basemap needed to be very compressed to allow the widest range of shades to be available for users for their overlays.

A typical use of Dark Matter with colorful data visualization overlays

In retrospect, we probably went way too dark on this one. Dark Matter is one of the darkest maps out there, and the first version of it is nearly unusable unless you’re in a room with all the lights off. A few years later, CARTO’s staff cartographer Mamata Akella did a slight revision, improving the contrast to make it more usable for a wider range of lighting conditions.

Dark Matter was originally a raster-only basemap, but the team at MapTiler has implemented a vector version, based on the OpenMapTiles schema, which can be used in modern MapLibre projects. It looks like MapTiler’s version is based on the original super-dark Dark Matter palette, and could use a github pull request to update the contrast a bit.

a screenshot of MapTiler’s version of Dark Matter (using the original palette) compared with the updated version of CARTO’s raster Dark Matter, with improved contrast

Dark Matter was the dark member of a pair of maps that included Positron, which was launched by CARTO at the same time. Interestingly, we didn’t design a central “colorful” style for CARTO at the time, but shortly afterward they must have realized they needed one in their offerings, so they created the colorful “Voyager” style not long after.

CARTO’s Dark Matter, Voyager, and Positron, (retroactively) fitting the old paradigm of light- and dark-mode maps as dataviz-focused variations off a default “colorful” map

Black land, or water?

On the topic of contrast: the most important contrast decision you have to make when designing a dark map is the contrast between land and water. This is not to say that those two elements need to be the most contrasty, just that the the decisions you make in terms of contrast between those two very important map elements will have put serious constraints on your contrast choices for almost everything else on the map.

Comparison of Midnight Commander and Dark Matter in the same area

One thing you may have noticed in looking at these first two dark map examples (Midnight Commander and Dark Matter) is that they make very different choices regarding whether water is black, or whether land is black. Your choice may depend on how light the light mode is (and how closely the dark mode map needs to match the light mode stylistically). The choice of whether your land is darker or lighter than your water will be influenced by how you plan to choose your colors, whether you conceptually think of dark mode as an inversion of your light mode (that is, flipping the entire palette), or whether you think of it as taking our light palette and shifting it to the darker end of the spectrum.

And of course it also depends on what the dark mode use case is!

There are differing opinions about this question, and no right answer. Surveying some of the major mapping providers, we see no clear consensus:

Dark maps that use black(-ish) water:

• Google Maps Dark Mode
• Mapbox Dark
• MapTiler Dataviz Dark
• Stadia Alidade Dark
• Midnight Commander

Dark maps that use black(-ish) land:

• AWS Standard Dark
• HERE Explore Dark
• Protomaps Dark
• Stamen/CARTO Dark Matter
• Stamen Toner Dark

Advantages to making the land black (or at least darker than the water):

• For a dataviz map, most of your data is likely to be on the land, so a black background gives you a wider range of options for choosing your dataviz overlay colors.

A CARTO map showing a data overlay ranging from bright to very dim dots. The low end of the data would not be visible if the land was gray, not black.

• For a navigation map, most of the time when you’re driving it’s land that’s around you. So a black background gives you more color to work with to make your roads have enough contrast on the background and enough variation of road color to indicate major versus minor roads. And as with dataviz maps, having the surrounding area be black gives you more color options to indicate navigation-related overlays like traffic highlighting.

Navigating in Apple Maps Dark Mode, showing near-black land color allowing for a variety of easy-to-see annotations without being too bright.

Advantages to making the water black, and the land a bit lighter:

• Black halos on text and black casings on roads can give them more three dimensionality when they’re on a dark gray land background versus a black background where halos would be invisible.

• It’s easier to indicate landuse with different dark hues. Otherwise, patches of colored landuse on black land can be confusing to the reader, making them wonder what is land and what is not.

• Darker water helps with understanding figure/ground relationship. The darker color typically recedes in the viewer’s perception, and people expect land to be in the foreground, rather than water.

Mapbox Dark v11 vs Stamen’s Toner Dark: Even if you ignore the hillshades and roads, it’s easier to understand what is land and what is water if the water is darker

• For hillshades, you can darken the land to indicate shadows.

Esri’s Dark Hillshade* style, with black water and a relatively light gray land color to enable dark shadows*

If you really need to add hillshades to a dark map with black land, it’s not impossible, just difficult. Back when we were exploring putting hillshades on Dark Matter (which has black land), we experimented with using one color to highlight one side of mountains, and a different light color to give a moonglow to the shadows. While we never launched this enhancement to Dark Matter, we are pretty pleased with how the prototypes turned out.

Dark Matter prototype with experimental moonglow hillshading.

Recent work: light and dark mode, designed together

The light and dark “Standard” style basemaps we designed for AWS are an illustration of a primarily reference map use case (compared to Midnight Commander and Dark Matter which were more oriented to dataviz uses). For AWS we specifically created additional light/dark styles for the dataviz scenario, plus a light/dark with terrain for the outdoor use case, both based on the core Standard styles.

Notion features a light and dark reference basemap with enough color and contrast to distinguish major features from each other, but remains muted enough for data visualized on top to shine. We developed light and dark together from the beginning, designed to work within Notion’s existing minimalist light and dark interface.

Hudhud represents the navigation use case that we discussed earlier but haven’t looked at any examples yet. There are no dataviz variants of this style needed, there is no grayscale option either. For this one we designed light and dark as co-equal styles from the very beginning.

Visualizing map palettes as scatterplots

We have mentioned several times that designing a good dark mode map is not as simple as just inverting a light mode map. Sometimes you want to maintain light mode color relationships by mirroring them (that is, inverting them) into the darker end of the lightness scale… like, if land is lighter than water in dark mode, then you’d want land to be darker than water in dark mode. But in another situation maybe you want your color relationships just to be shifted to a darker register, like transposing a chord on a piano from one end of the keyboard to the other, but maintaining the same relationships between the notes. Either of these approaches (shifting vs mirroring) breaks down somewhat because the same quantitative color difference between two light colors might be perceived by the eye as a greater or lesser difference in the darker end of the spectrum. Here we could go off into a long tangent about color spaces, but that is a topic for another post.

As we thought about these color relationships, we were interested to see, as objectively as we could, how different map services solved these problems, by finding some way to visualize the colors used on a map graphically.* *We also wanted to see how color choices changed between light and dark versions of the same map, so we ended up using a two dimensional scatterplot of lightness on one axis, and the hue (the quantitative metric of where a color is along the rainbow spectrum). To work with the challenge of some specific colors appearing over a large proportion of the map (such as the color of water), we counted the number of pixels of each color from a screenshot of the input map, and sized the scatterplot circles according to the frequency of each color. If water makes up half of the screenshot and there is no variation in the water color, then that dot on the scatterplot would be a huge circle relative to the other dots on the chart.

Here’s what the end result looks like, visualizing Stamen Terrain as an example:

As an aside, we made these visualizations almost completely through a vibe-coding process using Visual Studio Code’s built-in AI assistant, prompting it based on our knowledge of how we normally create these kinds of charts using D3.js. At Stamen we’re actively looking for “safe” and bounded ways to experiment with AI-assisted coding experiments such as this, without (so far) applying it to client work. We are still formulating our studio philosophy about Generative AI, and we will likely be blogging more about that topic in the near future. Stay tuned…

Once we had this system to easily create scatterplots based on screenshots of a number of popular public basemaps, we compared the light and dark mode of each basemap to see how the cartographers designed two versions of the same map to work together. We also compared between different map providers to look for patterns and differences.

First let’s compare some maps that illustrate the difference between a shifted/transposed color palette versus a flipped/mirrored color palette.

Comparing Mapbox Dark and Mapbox Light, you can see in the scatterplot how the same relative positions of all the colors stay the same, they’re just dragged from the 80-100% lightness range over to the 0-20% range. It is as though most of the colors had a 80% lightness shift.

On the other hand, the Protomaps Light and Dark styles look more like a left-to-right flip, rather than a shift:

Whether you choose to shift colors or mirror them, that’s usually just the first step in designing a dark mode map. The next major decision in dark map design is deciding how closely the style needs to map its light mode sibling. Maintaining similar hues but just transposing them to lower lightness values doesn’t necessarily maintain the same overall vibe of the map. Those same hues might feel different in the dark register vs the light. Also, depending on how dark the map needs to be, you might need to spread the hues further apart in order for them to still be distinguishable from one another. But at the same time, dark mode colors need to be a bit more desaturated so they don’t look too harsh.

A good example of this is Apple Maps, where the light mode and the dark mode look *very *different from each other when you compare individual colors, but overall the two styles still feel like they belong together. In light mode most of the green colors are around hue 100, but in dark mode they are much bluer around hue 180.

The maps we designed for AWS follow a similar pattern, with the dark mode greens having a relatively blueish tint, while in light mode the greenspace colors are much warmer and closer to a true green.

We can also use these charts to compare two iterations of the same style, for example the 2014 and 2017 versions of Dark Matter we discussed earlier:

Not quite what you expected, perhaps? There are some interesting things happening in this chart: first of all, we’re seeing a bit of a limitation in the scatterplot when it comes to nearly-grayscale maps. That’s because we are only visualizing two of the three factors involved in defining a color in the HSL color space: of Hue, Saturation, and Lightness, we are ignoring the Saturation value in our chart… which is normally fine but not so great for a grayscale map.

When Saturation is low (or near zero) then the Hue value becomes almost irrelevant, and a color with zero Saturation could have any arbitrary value for Hue and it wouldn’t make a difference. So in this example, the scatterplots look very different because the top map (the original Dark Matter palette) has a lot of near-black colors that have a tiny bit of Hue=240, that is, the color blue. It doesn’t look blue at all because it is almost completely desaturated, but you can trust the data: the blue is there. In the bottom map, those colors are likely at 0% saturation, so the hue value is set to an arbitrary value of 0, which happens to be the color red.

So, maybe if we need to do enough visualizations of fully grayscale maps we will figure out a graceful way of handling those hue values on the scatterplot. But for now, just ignore the Y axis: hue doesn’t matter here. If we only look at the differences on the X axis, the difference seems subtle, and yet the two maps look fairly different in terms of contrast (at least to my eyes). The difference is that the old Dark Matter style had most of its colors at a lightness value less than 10%, while the new Dark Matter has its water at almost 20% lightness. Just a small change, but it can have a world of difference when making narrow contrast distinctions in a dark setting!

What next?

We are excited about this new visualization tool, and it has already helped us confirm some of our theories about the different ways that dark maps have been and could be designed (that we described earlier). But we’re also just beginning to think of how we might use it to further understand map palettes, and maybe even set some rules (or at least guidelines) of what the scatterplot should look like if you’re designing a map with specific constraints or use cases. Like, if you are deliberately designing a “dark vibes” map for use in daylight, are there certain lightness ranges you should avoid with your colors, or certain spacing of color progressions that work best?

Also, could we use these scatterplots during the design process to spot when we have any colors that are somehow “off” so we can adjust them to be more harmonious with the rest of the palette? Does a tidy-looking scatterplot imply a more pleasing and well-designed map? Or is a messy scatterplot the mark of true cartographic genius?

As we use these scatterplots more in our work, we will be thinking about whether it makes sense to incorporate them into any of our open source map design tools, such as Chartographer which already has several powerful ways of visualizing a map stylesheet in new ways. If we end up making this tool public, you’ll hear about it in this blog, so stay tuned.

And before we go, here are the scatterplots of the two new dark versions of Toner we launched last month. The contrast is so extreme on these maps, that the new Toner Blacklite blew out the edge of the scatterplot! And we’re okay with that.

That’s just how Toner rolls.

The slightly less-intense Toner Lite (and its new sibling Toner Dark) also tests the limits of the scatterplot, but you can also see the nice and subdued 20%-ish contrast between water and land mirrored in both versions (a lightness difference similar to the revised version of Dark Matter we looked at earlier).

Read more about these new maps in this post and find the new styles here at Stadia Maps!

Conclusion

We hope you enjoyed this tour through the philosophy and lore of the dark side of cartography. We feel like we have only scratched the surface, so let us know if there are any aspects of dark map design that you’d like us to explore further in future blog posts, or if you have thoughts to share about how you approach designing a dark map. Also, we’d love to know of any great dark maps maps we might have missed!

Do you need a new dark map designed or an old one refreshed? Get in touch!