> For the complete documentation index, see [llms.txt](https://mango-5m.gitbook.io/mango5m-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mango-5m.gitbook.io/mango5m-docs/resources/mango-dispatch/reference/styling-the-ui.md).

# Styling the UI

The CSS palette, and previewing the whole UI in a browser while you edit it.

`web/css/style.css` is plain CSS - no build step, no framework - and it is outside escrow, so it stays editable.

### The palette

Every colour, radius and shadow is a variable at the top of the file:

```css
:root {
    --panel: #121a28;
    --panel-2: #0d131f;
    --panel-hover: #18212f;
    --border: #1e2636;

    --text: #e8edf5;
    --text-dim: #8b98ad;
    --text-mute: #58637a;

    --accent: #3b82f6;
    --accent-soft: rgba(59, 130, 246, 0.14);

    --green: #34d399;
    --amber: #fbbf24;
    --red:   #f87171;

    --radius-sm: 6px;
    --radius: 9px;
    --radius-lg: 13px;
}
```

Changing `--accent` alone re-themes the code chips, the highlighted row and the prompt keys. The three status colours carry the toast types.

### Preview it in a browser

{% stepper %}
{% step %}

### Open the preview file

Open `web/preview.html` directly in any browser - no server needed. It loads the same CSS and JS the game uses and immediately renders an alert card, a populated call window and a toast.
{% endstep %}

{% step %}

### Re-render at will

```js
mdTest()
```

From the browser console, with sample calls including a highlighted row and a call you are already on.
{% endstep %}

{% step %}

### Edit and refresh

Save `style.css`, refresh the page. When it looks right, restart the resource in game.
{% endstep %}
{% endstepper %}

{% hint style="info" %}
`preview.html` exists only for styling. It is not part of the in-game UI - `index.html` is - and it never loads in FiveM.
{% endhint %}

### Moving things by default

Default positions are in the CSS - the alert stack is `position: fixed; top: 16px; right: 16px`. Editing those changes the default for everyone.

Players who have saved their own layout with `/dispatchhud` keep theirs, since inline positions from the layout editor override the stylesheet. They can hit **Reset** in the editor to fall back to your defaults.

### What you should not restyle away

The alert card's prompt row shows the actual configured keys, pulled from `config/config.lua` at runtime. If you hide that row, players lose the only on-screen hint of which keys do what.

### The icons

The UI's icons are inline SVG in `web/js/app.js` - stroke-based, and they inherit `currentColor`, so they follow whatever text colour you set in CSS without being edited.