Updated September 17, 2021 – We have released a new feature to easily change the background colors for all the views. Therefore, the method to set a dark background described below is not relevant anymore. CSS customization is not needed and is not recommended to create a dark theme for your map.
By default, Mapme uses a light color user interface for the side content panel. The dark text on the white background provides a great user experience for most cases.
However, there are situations where you might want to apply a dark theme to your map user interface.
You can easily switch from the default light theme to a dark one. We created all the custom CSS needed.
Check out those examples.
Why use a dark theme?
In general, you want to match your map theme with the user environment. Therefore, dark themes are recommended in an environment with limited lighting like, for example, an event taking place in the evening or at night. On the other hand, a light color theme is preferable for a map used in a bright environment like an office or daylight.
Besides the practical considerations, dark themes can give a cool look to your map and help you achieve striking visuals.
In addition, if you are using one of the darker map styles like Digital or Terminal, a dark theme for the content will provide a more consistent look to the map.
Dark themes are also easier to read for users with low vision and help meet accessibility color contrast standards.
When not to use a dark theme?
We do not recommend using a dark theme when:
- your map has descriptions with a lot of text. Reading long texts on a dark background can be tiring.
- you have a lot of different colors like, for example, many different markers colors.
- your map will be used primarily outdoors during day time.
How to apply the dark theme template
You can apply a dark theme to all or just some of the content views and elements:
- Overview header
- Category legend
- List view
- Compact view
- Expanded view
Copy and paste the relevant CSS in your CSS editor
/* Set all Background color */
.mapme-theme__layout-landscape-pane,
.mapme-theme__slider {
background-color:#292929 !important;
}
/* OVERVIEW HEADER */
/* Change style of description text of overview map info */
.mapme-theme__overview-content-text {
color: #FFFFFF !important;
font-size: 14px !important;
line-height: 1.2 !important;
}
/* CATEGORY LEGEND */
/* hoover on category list */
.mapme-theme__category-level-1:hover {
background-color: #a9a9a9 !important;
}
/* customize style of category names */
.mapme-theme__select-category-name {
color: #ffffff;
}
/* number of locations*/
.mapme-theme__select-category-sections-count {
color: #ffffff !important;
}
/* LIST */
/* List title */
.sections-list-item-title {
color: #ffffff !important;
}
/* List description */
.mapme-theme__sections-list-item-content {
color: #ffffff !important;
}
/* set color of address */
.mapme-theme__section-list-address .has-text-grey,
.mapme-theme__section-details-address.has-text-grey {
color: #ffffff !important;
}
/* set color of address with direction links */
.mapme-theme__section-list-address .has-text-link,
.mapme-theme__section-details-address.has-text-link {
color: #3366BB !important;
}
/* set color of clamp shading. To remove use transparent */
.mapme-theme__sections-list-item .media-content .line-clamp:after {
background: linear-gradient(to right, #00000000, #292929FF) !important;
}
/* List hover background */
.mapme-theme__sections-list-item-container:hover {
background-color: #292929 !important;
}
/* CARD */
/* mobile handle */
.mapme-theme__drag-handle {
background-color: #292929;
}
/* Customize title (location name) – detail card*/
.mapme-theme__section-details-title {
color: #FFFFFF !important;
}
/* description */
.mapme-theme__section-details-text {
color: #ffffff !important;
}
/* change gradient at bottom */
.static-scroller.has-fade:after {
background: linear-gradient(0deg,#000 0,hsla(0,0%,100%,0)) !important;
}
/* change image background color – detail card */
.mapme-theme__has-background-black {
background-color: #292929 !important;
}