Theme¶

Every color in the app comes from your project's theme.json. Pick a built-in preset, then override individual color tokens if you want. The app reads the file as settings.theme, the same way it reads layers.json and basemaps.json.

{
  "$schema": "../../schema/theme.schema.json",
  "preset": "ocean",
  "colors": { "primary": "blue-900" }
}

Type " inside colors in VS Code to get the list of every token, with its role and default.

Fields¶

Colors resolve the same way as every other setting in the kit:

kit default ← preset ← colors

An unknown preset name is reported when the project's files are read (theme.json → preset), with the valid options; see Concepts.

Presets¶

light and dark color the top bar like the panels. The other presets give it a bold color of its own.

A dark preset changes more than colors. The browser's own controls (scrollbars, dropdown menus) render dark, and the map's controls turn dark too, unless mapControls says otherwise.

Color tokens¶

A token's value is one of:

• a Tailwind color name and shade, like "indigo-700" or "rose-600", from Tailwind's palette;
• "white", "black" or "transparent";
• another token's name ("primary", "panelBg", "text") to follow that token: "save": "primary" keeps the Save button on your brand color, whatever it is.

Names are case-sensitive. The settings editor only offers these, and refuses anything else.

Every token is optional. Leave out a token, or the whole colors block, and it falls back to the preset. Many tokens follow primary, so changing primary alone recolors most of the app.

Defaults below are from the conness preset, in the order the editor lists them.

Text and top bar

Panels

Actions

Accents

primaryDarker is a special value: primary made about 15% darker, recomputed from whatever primary is. Hover states use it.

Buttons with a solid colored fill (primary, danger, success, save, actionActive) and colored top bars use white text, so keep those tokens dark enough for white text to read.

Map controls¶

MapLibre's controls (zoom, compass, geolocate, globe, terrain, fullscreen), the zoom readout, the scale bar and the floating widget buttons over the map share one look, set by mapControls: "light" (white buttons, dark icons) or "dark" (dark buttons, light icons). Unset, it follows the preset, so dark presets get dark controls. Their pop-outs, like Search's results, keep the panel colors.

Two tokens fine-tune it:

MapLibre's own control icons are images, so they stay black or white by mapControls whatever mapControlIcon is.

Examples¶

Keep a preset and change only the brand color:

{
  "$schema": "../../schema/theme.schema.json",
  "preset": "conness",
  "colors": { "primary": "emerald-700" }
}

A light top bar on the default palette:

"colors": { "topBarBg": "white", "titleText": "slate-900", "topBarWidget": "slate-600" }

What the theme doesn't control¶

• Map geometry colors. The shapes the Draw and Measure widgets paint on the map, and the amber highlight on a hovered drawing, use fixed colors. They need many distinct colors and must read on any basemap. The widgets' panels do follow the theme.
• Layer styling. Set per layer through Symbology, with label defaults in ui.layerDefaults.
• The map background. That's map.backgroundColor; see Map & Camera.

Widget header styling¶

widgetTitleColor sets the title color. Whether titles and their divider show at all is set in ui.widgetHeader; see UI & Layout.