> ## Documentation Index
> Fetch the complete documentation index at: https://docs.elementlabs.net/llms.txt
> Use this file to discover all available pages before exploring further.

# Colours

> Change the colours of the map's interface.

## 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](/products/map/configuration/blips) and [Routes](/products/map/configuration/route).

## 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:

```jsonc theme={null}
{
  "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:

```jsonc theme={null}
{
  "namespace": "ui",
  "configVersion": 1,
  "scope": "shared",
  "values": {
    "theme": {
      "radius": "0"
    }
  }
}
```

### A change that will not read well

```jsonc theme={null}
{
  "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

```text theme={null}
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.

## Related

* [Configuration](/products/map/configuration/index)
* [Interface](/products/map/configuration/hud): turning panels off entirely