We’re very excited to announce a new feature to customize your map content background color. This new level of customization lets you easily match the look and feel of your website and brand.

When you select your background color, the text color is automatically adjusted for optimal contrast so your map always looks great.

This new feature is available to all Mapme customers.

dark-light-map-theme

How does it work

You can easily apply different background colors to your map’s content panel. The background color applies to all the map content views:

  • the map home
  • The filter and search results list
  • The location details

Text colors

When you select a background color, the text colors are automatically adjusted to provide optimal contrast with the background color. For example, with a dark background color, the text colors will be set to a light color, close to white. On the other hand, with a light color background, the text color will be set to a dark color.

Design element colors

Similar to the text colors, the design element colors are automatically adjusted to provide optimal contrast with the background color. Design elements include lines separators, expand/collapse arrows, gradients, and hoovers on mouse-overs.

How to set the content background color?

To access it, go to Settings > Style  > Background Theme Color

You can select a preset color from the palette or set your own color with the advanced color picker.

map-background-colors

Best Practices

Recommended colors

We recommend using either strong dark or light colors. With mid-range colors, the text might be more difficult to read since there might not be enough contrast between the background and the text color.

Toolbar color

We recommend matching the toolbar color with the background theme color, so the toolbar will integrate seamlessly with the other elements of the map user interface.

Map color

If you are using a styled basemap such as a dark map style, we recommend matching the map content color with the map style color. As a result, the basemap and the content panel look seamlessly integrated.

Check it out for yourself!

See the new Background Theme Color in action!