Appearance

configs/ui.jsonc holds the look of the map’s interface: five colours, the rounding of its corners, how strong its panels are, how the selected tab is marked, and whether keyboard focus is outlined. Everything on screen is one of the five colours at some opacity. There is no per-element setting, and no separate colour for panels, headings and rows: they are the same two colours at different strengths, which is what keeps the interface looking like one thing. This does not change the world, the markers or the route. Those have their own settings. See Markers and Routes.

Settings

Every key lives under theme.

Colours

Values accept any CSS colour: rgb(...), a hex code, or a named colour. Transparency is not read from the value: the interface applies its own, per element.

Key	Default	Applies to
`ground`	`rgb(0, 0, 0)`	Every panel, bar and backdrop. Drawn between 5% and 80% opacity, so the world stays visible through it.
`ink`	`rgb(255, 255, 255)`	Every piece of text and every icon, and the background of a highlighted row: where `ground` becomes the text.
`primary`	`rgb(246, 158, 0)`	The accent: the active tab, the filled part of a bar, the mark on a changed setting.
`primaryForeground`	`rgb(23, 23, 23)`	Text drawn on the accent.
`destructive`	`rgb(255, 100, 103)`	Warnings: a conflicting key binding, a setting over the memory budget.

ground and ink are a pair and they swap: the row under the cursor is drawn in ink with ground as its text. Setting the two to colours that do not read against each other makes both states unreadable, not one.

Shape

Key	Default	Applies to
`radius`	`"0px"`	The corners of every panel, row, button, bar, tab and keycap. One CSS length, such as `4px` or `0.25rem`. `0px` is square. The rows of a settings section are drawn as one block, so only its first and last rows have round corners. The tick boxes of the advanced legend stop at `4px`.
`panelOpacity`	`1`	A multiplier on the strength of every panel and backdrop. `0.5` halves it, `1.5` thickens it; any step that reaches full opacity stays there. Text and highlighted rows are not affected.
`accentBorder`	`"spin"`	The border around the selected tab, legend row or list row. `"spin"` rotates, `"static"` is a solid accent outline, `"none"` draws no border: the row’s own highlight still marks it.
`focusRing`	`true`	The accent outline on what Tab moves to, and round a search bar while you type in it. The outline appears only after Tab: clicking, the arrows and a pad move the selection instead, which the row’s own highlight marks. `false` draws neither; a search bar still darkens while you type.

Example

An interface matching a blue server brand:

{
  "namespace": "ui",
  "configVersion": 2,
  "scope": "client",
  "values": {
    "theme": {
      "primary": "rgb(59, 108, 240)",
      "primaryForeground": "rgb(250, 250, 250)"
    }
  }
}

theme is merged key by key, so every key not listed keeps its shipped value. Rounded, more solid panels with a still border:

{
  "namespace": "ui",
  "configVersion": 2,
  "scope": "client",
  "values": {
    "theme": {
      "radius": "6px",
      "panelOpacity": 1.4,
      "accentBorder": "static"
    }
  }
}

A light interface, which means swapping the pair rather than changing one of them:

{
  "namespace": "ui",
  "configVersion": 2,
  "scope": "client",
  "values": {
    "theme": {
      "ground": "rgb(245, 245, 245)",
      "ink": "rgb(15, 15, 15)"
    }
  }
}

A change that will not read well

{
  "namespace": "ui",
  "configVersion": 2,
  "scope": "client",
  "values": {
    "theme": {
      "ink": "rgb(40, 40, 40)"
    }
  }
}

Dark text on dark panels: ground is still black, so nothing on screen can be read. Change the two together.

Applying changes

restart element_3d_pausemenu

The theme is read when the resource starts and applied as the interface loads.

Limits

Key	Stay within	Why
Every key	The type in its table	A value the browser cannot read is ignored and the shipped value stays. There is no error, so check the result in game after an edit.
`ground` and `ink`	Colours that contrast with each other	Both states of every row are drawn from the pair. Two colours close together leave the interface unreadable in both.
`primary` and `primaryForeground`	Colours that contrast with each other	The accent is a filled bar with text on it.
`radius`	Below half a row’s height, about `20px`	Past that, rows and tabs turn into pills and the keycaps into circles. A negative length or a percentage is ignored.
`panelOpacity`	`0.5` to `2`	Below about `0.5` text over bright terrain is hard to read.

The interface has no automatic contrast correction: a pair you set is a pair that is drawn.

Configuration
Map: turning panels off entirely

Get started

Guides

Configuration

For scripters

Troubleshooting

Changelog

Settings

Colours

Shape

Example

A change that will not read well

Applying changes

Limits

Get started

Guides

Configuration

For scripters

Troubleshooting

Changelog

Settings

Colours

Shape

Example

A change that will not read well

Applying changes

Limits

Related