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.







  

      
        
          
          Change between light and dark mode based on the time of day
        
        
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
        
        
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
        
        
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
        
        
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.

      
    
   
  



      
      

      
        An extension of MapLibre GL JS
       
      

      
    

    

        


  
    
  





        
        

        
          
            
          
        
          
            
          
        
          
             
            

                
                  
Module Usage

                  
                
            

            
          
        
          
             
            

                
                  
Module Reference