> For the complete documentation index, see [llms.txt](https://devmosaic.gitbook.io/devmosaic/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://devmosaic.gitbook.io/devmosaic/resources/devmosaic-dm-hud/ui-theme.md).

# Colours And Theme

Recolour the whole HUD with one line, then override individual pieces if you want to.

{% hint style="success" %}
**Change the whole HUD's colour**

`shared/config.lua`

```lua
DashCfg.theme.accent = DashUI.cyan
```

Restart. Everything follows it.
{% endhint %}

## The theme block

```lua
DashCfg.theme = {
    accent = DashUI.lime,
    surface = 'rgba(10,10,11,.86)',
    backdrop = 'rgba(0,0,0,.58)',
    cut = 10,
}
```

| Setting    | What it does                         | Example                      |
| ---------- | ------------------------------------ | ---------------------------- |
| `accent`   | The colour of nearly everything      | `DashUI.cyan` or `'#00e5ff'` |
| `surface`  | Panel background                     | `'rgba(10,10,11,.86)'`       |
| `backdrop` | The dim behind an open panel         | `'rgba(0,0,0,.58)'`          |
| `cut`      | Size of the clipped corner on panels | `10` (pixels)                |

Both a preset name and a raw hex work:

```lua
accent = DashUI.magenta
accent = '#ff2fb9'
```

{% hint style="info" %}
`surface` and `backdrop` want `rgba()` so the game shows through. Use the last number for transparency — `.86` is 86% opaque, `0` is invisible.
{% endhint %}

## The 100 presets

All in `shared/ui.lua`. Use them as `DashUI.name`.

<details>

<summary>Greens — 12</summary>

`lime` `#a3e635` · `grass` `#65d945` · `emerald` `#34d399` · `jade` `#22c58a` · `mint` `#5ceac0` · `spring` `#3ddc84` · `forest` `#4ca64c` · `olive` `#9aad3a` · `moss` `#7fa650` · `neonGreen` `#39ff14` · `pistachio` `#b4e07a` · `seafoam` `#7fffd4`

</details>

<details>

<summary>Cyans and teals — 8</summary>

`teal` `#14b8a6` · `aqua` `#22d3ee` · `cyan` `#00e5ff` · `turquoise` `#40e0d0` · `lagoon` `#2ec4b6` · `iceBlue` `#8ee9f5` · `pool` `#38bdf8` · `sky` `#63c9d6`

</details>

<details>

<summary>Blues — 12</summary>

`azure` `#3b82f6` · `cobalt` `#2563eb` · `royal` `#4169e1` · `sapphire` `#1e6fd9` · `steel` `#5b8dbe` · `denim` `#4a6fa5` · `midnight` `#5b6ee8` · `cornflower` `#6495ed` · `periwinkle` `#8fa6ff` · `electricBlue` `#00b3ff` · `iceberg` `#a5c9ff` · `navyGlow` `#4d7cff`

</details>

<details>

<summary>Purples and violets — 10</summary>

`indigo` `#6366f1` · `violet` `#8b5cf6` · `purple` `#a855f7` · `amethyst` `#9b5de5` · `orchid` `#c05de0` · `lavender` `#b39ddb` · `plum` `#8e4585` · `grape` `#7b2ff7` · `ultraviolet` `#7f00ff` · `mauve` `#c8a2c8`

</details>

<details>

<summary>Pinks and magentas — 10</summary>

`magenta` `#ff2fb9` · `fuchsia` `#e879f9` · `hotPink` `#ff4d94` · `rose` `#fb7185` · `blush` `#ff8fa3` · `bubblegum` `#ff77ff` · `raspberry` `#e3256b` · `cerise` `#de3163` · `watermelon` `#fc6c85` · `flamingo` `#fc8eac`

</details>

<details>

<summary>Reds — 10</summary>

`red` `#ef4444` · `crimson` `#dc143c` · `scarlet` `#ff2400` · `ruby` `#e0115f` · `cherry` `#d2042d` · `brick` `#cb4154` · `rust` `#b7410e` · `ember` `#ff5349` · `blood` `#c81e1e` · `neonRed` `#ff2d2d`

</details>

<details>

<summary>Oranges — 10</summary>

`orange` `#f97316` · `tangerine` `#f28500` · `pumpkin` `#ff7518` · `apricot` `#fbceb1` · `coral` `#ff7f50` · `salmon` `#fa8072` · `amber` `#ffbf00` · `marigold` `#eaa221` · `copper` `#b87333` · `bronze` `#cd7f32`

</details>

<details>

<summary>Yellows — 9</summary>

`yellow` `#facc15` · `gold` `#ffd700` · `lemon` `#fff44f` · `mustard` `#ffdb58` · `honey` `#f0b429` · `banana` `#ffe135` · `champagne` `#f7e7ce` · `sand` `#e0c68a` · `neonYellow` `#ccff00`

</details>

<details>

<summary>Neutrals — 10</summary>

**Warm:** `cream` `#fffdd0` · `taupe` `#b38b6d` · `chocolate` `#c47a2c` · `coffee` `#ab8467`

**Cool:** `white` `#f8fafc` · `silver` `#c0c0c0` · `platinum` `#e5e4e2` · `slate` `#94a3b8` · `graphite` `#6b7280` · `gunmetal` `#8a939b`

</details>

<details>

<summary>Neon — 9</summary>

`neonPink` `#ff10f0` · `neonCyan` `#0ff0fc` · `neonOrange` `#ff6700` · `neonPurple` `#bc13fe` · `laser` `#00ff9f` · `plasma` `#ff00e6` · `toxic` `#b0ff00` · `volt` `#d0ff14` · `hazard` `#ff9f1c`

</details>

## Overriding one piece

At the bottom of `shared/ui.lua`, `DashUI.colours` lets a single element keep its own colour instead of following the accent. **Everything is commented out by default, which means everything follows the accent.** Uncomment only what you want to break away.

```lua
DashUI.colours = {
    speedo   = '#a3e635',
    waypoint = '#a3e635',
    compass  = '#a3e635',
    logo     = '#a3e635',
    ammo     = '#a3e635',

    chipJob   = '#a3e635',
    chipCash  = '#60a5fa',
    chipBank  = '#34d399',
    chipGang  = '#f87171',
    chipId    = '#eab308',
    chipClock = '#cbd5e1',

    lamps    = '#e6edf2',
    fuel     = '#63c9d6',
}
```

| Key         | Colours                                   |
| ----------- | ----------------------------------------- |
| `speedo`    | Speedometer dial, RPM arc and gauges      |
| `waypoint`  | Distance-to-waypoint chip                 |
| `compass`   | Compass ticks and heading                 |
| `logo`      | Your logo tint                            |
| `ammo`      | Ammo counter                              |
| `chipJob`   | Job chip                                  |
| `chipCash`  | Cash chip                                 |
| `chipBank`  | Bank chip                                 |
| `chipGang`  | Gang chip                                 |
| `chipId`    | Player ID chip                            |
| `chipClock` | Clock chip                                |
| `lamps`     | The indicator lamps under the speedometer |
| `fuel`      | Fuel gauge                                |

{% hint style="info" %}
**The six chip colours ship uncommented.** Job, cash, bank, gang, ID and clock each have their own colour out of the box, so the chip row reads at a glance. Comment them out to make them follow your accent instead.
{% endhint %}

## Status bar colours

Bar colours are not here — they are per-player defaults in [`shared/defaults.lua`](/devmosaic/resources/devmosaic-dm-hud/defaults.md#status-bars), because players can change them in the settings menu.

```lua
colours = {
    health = { progress = '#6cd444', icon = '#c3f0ae' },
},
```

To stop players changing them, lock the paths in [`shared/policy.lua`](/devmosaic/resources/devmosaic-dm-hud/policy-and-locks.md).

## The corner cut

```lua
cut = 10
```

Panels have one clipped corner. `cut` is how deep, in pixels.

| Value | Look                 |
| ----- | -------------------- |
| `0`   | Plain square corners |
| `10`  | Default              |
| `20`  | Sharply angled       |

## Recipes

{% tabs %}
{% tab title="Neon night" %}

```lua
DashCfg.theme = {
    accent = DashUI.neonCyan,
    surface = 'rgba(6,10,16,.9)',
    backdrop = 'rgba(0,0,0,.65)',
    cut = 14,
}
```

{% endtab %}

{% tab title="Clean and flat" %}

```lua
DashCfg.theme = {
    accent = DashUI.white,
    surface = 'rgba(18,18,20,.92)',
    backdrop = 'rgba(0,0,0,.5)',
    cut = 0,
}
```

{% endtab %}

{% tab title="Emergency services" %}

```lua
DashCfg.theme = {
    accent = DashUI.azure,
    surface = 'rgba(8,12,20,.88)',
    backdrop = 'rgba(0,0,0,.58)',
    cut = 6,
}
```

{% endtab %}
{% endtabs %}