Configuration

Theming

The client should look like the site it sits on — not like a GIS product. Colours, radii and fonts are design tokens, settable from the config or from the host page's CSS.

Try it: the buttons above set CSS custom properties on the element from outside — no rebuild, no config reload. Note what the font buttons do not touch: the labels drawn inside the map.

Two ways in

From the config, for the CMS editor who never touches CSS: 


        

          Or from the host page's stylesheet, for the integrator who wants the map to inherit the
          site's design system:
        

        
          map0-viewer {
            --map0-primary: #b91c1c;
            --map0-radius: 4px;
            --map0-font: "Inter", system-ui, sans-serif;
            height: 520px;
          }
        

      


      

        
Light, dark, or whatever the visitor prefers

        

          theme.mode takes "light", "dark" or
          "auto" (the default), which follows the operating system and reacts when the
          visitor changes it mid-session. Panels, popups, dialogs and the synthetic background of
          raster basemaps all switch together.
        

        

          Shadow DOM, on purpose
          map0 renders into a shadow root, so the host page's stylesheet cannot accidentally break
          the map, and the map cannot leak styles into the page. Custom properties and documented
          ::part() names are the deliberate way through that boundary.
        

      


      

        
Where the font token stops

        

          theme.font styles the interface — panels, popups, dialogs, buttons. It does
          not reach the labels drawn inside the map: those are rendered from the glyph set the
          basemap style points at, and changing them means changing the style, not the client.
        

        

          That split is worth knowing before you pick a display font. A serif interface next to
          sans-serif map labels reads as a mistake even when both are deliberate, so the safe
          choice is a UI font close to the one the basemap uses — which is why this demo ships with
          the system stack and leaves the dramatic options to the buttons.