Theme¶

Every color in the app comes from app/theme.ts. Pick a built-in preset, then optionally override individual color tokens on top of it. settings.ts imports the file as settings.theme, the same way it imports layers.ts and basemaps.ts.

// app/theme.ts
import type { ThemeSettings } from '@/core/types'

export const theme: ThemeSettings = {
  preset: 'ocean',
  // widgetTitleColor: 'mutedText',
  colors: {
    // primary: 'blue-900',
    // …every token is listed here, commented out, with its role
  },
}

Fields¶

Colors resolve in three layers, the same default ← global ← override pattern used everywhere in the kit:

kit default ← preset ← colors

An unknown preset name stops the app at boot with an error naming settings.theme.preset and listing the valid options.

Presets¶

light and dark keep the top bar the same color as the panels; the flavored presets give it a bold color of its own.

A preset's mode matters beyond its colors: in a dark preset the browser's own controls (scrollbars, dropdown menus) render dark too, and MapLibre's built-in map buttons (zoom, compass, geolocate, globe, terrain) get their icons flipped light so they stay readable. Those map buttons follow light vs. dark, not individual tokens.

Color tokens¶

A token's value is a Tailwind color name + shade, like 'indigo-700' or 'rose-600' — pick from Tailwind's palette. A value can also be another token's name ('primary', 'panelBg', 'text') to follow that token: save: 'primary' means the Save button always matches your brand color, whatever it is.

Every token is optional. Leave out any line — or the whole colors block — and it falls back to the preset's value. Many tokens follow primary, so changing just primary re-skins most of the app.

Defaults below are the conness preset's.

Brand and text

Panels and top bar

Actions

Accents

primaryDarker is a special value: "primary, about 15% darker", recomputed from whatever primary is. It's used for hover states.

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.

Examples¶

Keep a preset, change just the brand color:

export const theme: ThemeSettings = {
  preset: 'conness',
  colors: { primary: 'emerald-700' },
}

A light top bar on the default palette:

colors: { topBarBg: 'white', topBarText: 'slate-900' },

What the theme doesn't control¶

• Map geometry colors. The shapes and lines 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. (Those widgets' panels follow the theme.)
• Layer styling — set per layer through Symbology, with label defaults in ui.layerDefaults.
• The map background — map.backgroundColor, see Map & Camera.

Widget header styling¶

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