Set dark mode based on system settings

This example shows how to change the map mode (light/dark) of the map based on the system settings.

The dark mode become more and more popular. To determine whether the system settings are normal or dark, we employ the matchMedia function that allows checking programmatically whether a CSS media query (prefers-color-scheme) has been fulfilled or not.

Related examples

Change to dark mode at sunset

Example

This example shows how to change the map mode between light and dark based on the time of day.

Switch to dark mode inside tunnels

Example

This example shows how to change the map mode (light/dark) based on the position in a route.

Built-in map styles

Example

Our built-in styles are designed to make it easier for you to create beautiful maps, without the need for extra coding or worrying about outdated versions.

Change map styles

Example

This tutorial shows how to change the map styles, you can switch between the built-in maps and your own custom maps.