Colours - Element Labs

Purpose

configs/ui.jsonc holds the colours the map’s interface is drawn with: panel backgrounds, text, borders and the accent colour used for highlights and the active tab. Each key is a colour token rather than a single element, so changing primary changes everything drawn in the accent colour at once. There is no per-element setting. This does not change the world, the markers or the route. Those have their own settings. See Markers and Routes.

Options

Every key lives under theme. Values accept any CSS colour: rgb(...), rgba(...), a hex code, or a named colour.

Surfaces

Key	Default	Applies to
`background`	`rgb(10, 10, 10)`	The base surface behind the interface.
`foreground`	`rgb(250, 250, 250)`	Text on that surface.
`card`	`rgb(23, 23, 23)`	Panels: the player card, the legend, the readouts.
`cardForeground`	`rgb(250, 250, 250)`	Text inside panels.
`popover`	`rgb(23, 23, 23)`	Surfaces layered above panels.
`popoverForeground`	`rgb(250, 250, 250)`	Text on those.

Accents and states

Key	Default	Applies to
`primary`	`rgb(246, 158, 0)`	The accent colour: the active tab, highlights, selection.
`primaryForeground`	`rgb(23, 23, 23)`	Text drawn on the accent colour.
`secondary`	`rgb(38, 38, 38)`	Secondary surfaces, such as inactive tabs.
`secondaryForeground`	`rgb(250, 250, 250)`	Text on those.
`accent`	`rgb(38, 38, 38)`	Hover and pressed states.
`accentForeground`	`rgb(250, 250, 250)`	Text on those.
`muted`	`rgb(38, 38, 38)`	Backgrounds for de-emphasised content.
`mutedForeground`	`rgb(161, 161, 161)`	Secondary text, such as the scale bar and distances.
`destructive`	`rgb(255, 101, 104)`	Errors and destructive actions.

Lines and shape

Key	Default	Applies to
`border`	`rgba(255, 255, 255, 0.1)`	Panel outlines and separators.
`input`	`rgba(255, 255, 255, 0.15)`	Outlines of fields.
`ring`	`rgb(115, 115, 115)`	The focus outline.
`radius`	`0.625rem`	Corner rounding. Not a colour: a CSS length. `0` gives square corners.

Every …Foreground key is the text drawn on the surface of the same name. Change the two together, or text becomes unreadable against its background.

Example

An interface matching a blue server brand:

{
  "namespace": "ui",
  "configVersion": 1,
  "scope": "shared",
  "values": {
    "theme": {
      "primary": "rgb(59, 108, 240)",
      "primaryForeground": "rgb(250, 250, 250)",
      "border": "rgba(255, 255, 255, 0.18)"
    }
  }
}

theme is merged key by key, so every colour not listed keeps its shipped value. Squaring off the corners:

{
  "namespace": "ui",
  "configVersion": 1,
  "scope": "shared",
  "values": {
    "theme": {
      "radius": "0"
    }
  }
}

A change that will not read well

{
  "namespace": "ui",
  "configVersion": 1,
  "scope": "shared",
  "values": {
    "theme": {
      "card": "rgb(250, 250, 250)"
    }
  }
}

Panels become white while cardForeground stays near-white, so panel text disappears. Change the surface and its foreground together.

Applying changes

restart element_map

The colours are read when the resource starts and applied as the interface loads.

Safety

Key	Stay within	Why
Every colour key	A valid CSS colour	A value the browser cannot read is ignored and the shipped colour stays. There is no error, so check the result in game after an edit.
`radius`	A CSS length, such as `0`, `4px` or `0.625rem`	A bare number without a unit, other than `0`, is not a valid length and is ignored.
Opacity in `rgba(...)`	Above roughly `0.5` on surfaces	Very transparent panels leave the world visible through the text and make the interface hard to read over bright terrain.

Keep enough contrast between each surface and its foreground. The interface has no automatic contrast correction: a pair you set is a pair that is drawn.

Configuration
Interface: turning panels off entirely

​Purpose

​Options

​Surfaces

​Accents and states

​Lines and shape

​Example

​A change that will not read well

​Applying changes

​Safety

​Related