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

Examples

Toggle light and dark map modes based on time.

Switch to dark mode inside tunnels

Examples

Change map style to dark mode when entering tunnels.

Built-in map styles

Tutorials

Easily create beautiful maps using reliable built-in styles.

Change map styles

Tutorials

Switch between built-in and custom map styles dynamically.