Dark themeIn this example, you’ll be shown how to modify the Maps Stylesheet to achieve a Dark mode, these images also include the custom marker icon modification (found above).   Default Maps style |  Custom Dark mode style |
| Note |
|---|
The map image used will need to be either suitable for a light/dark background or modified for use in a dark mode. |
The full CSS for this customisation can be found at the bottom of this section without comments. Background & Text Colours For this customisation, we can group all the elements that we want to have the same background and text colour, this saves some time and allows the Stylesheet to be a little smaller. | Code Block |
|---|
| #mapid,
#banner-menu,
#menu,
#panel, #panel .handle, #panel .action-buttons,
.book-panel, .book-panel .bookaction,
#timepicker,
.no-bookings-msg {
background: #292D3E; /* set background colour for all elements */
color: #c1c1c1; /* set text colour for all elements */
} |
This change on its own gets us almost to the stage we want.
However, looking closely some of the elements don’t work well with the darker backgrounds, such as the selected bookings button on the right side, also, the booking popup UI still has black text. The next step is to remove the light grey bar that is running down the right side panel. | Code Block |
|---|
| #panel {
border-left: 0;
} |
Now we will adjust the dark colour for the selected button.  Default selected button colour |  Custom selected button colour |
| Code Block |
|---|
| #panel #content .panel-button.selected,
.book-panel .bookit,
#timepicker .buttons .button.confirm {
background: #435abc; /* button background colour */
} |
Finally, we will adjust the booking popup input fields to have a white border and text.  Default booking UI |  Custom booking UI |
| Code Block |
|---|
| .book-panel input[type=text],
.book-panel input[type=button],
.book-panel .time-picker {
border: 1px solid #fff;
color: #fff;
} |
Full CSS for Dark Mode | Code Block |
|---|
| /* custom booking panel - dark theme */
#mapid,
#banner-menu,
#menu,
#panel, #panel .handle, #panel .action-buttons,
.book-panel, .book-panel .bookaction,
#timepicker,
.no-bookings-msg {
background: #292D3E;
color: #c1c1c1;
}
#panel {
border-left: 0;
}
#panel #content .panel-button.selected,
.book-panel .bookit,
#timepicker .buttons .button.confirm {
background: #435abc; /* button background colour */
}
.book-panel input[type=text],
.book-panel input[type=button],
.book-panel .time-picker {
border: 1px solid #fff;
color: #fff;
} |
| 
