# esx_chat_theme (/docs/core/esx_chat_theme)

esx_chat_theme is a visual theme for the default FiveM `chat` resource. It
gives chat messages the GTA-style Chalet font with a drop shadow and removes the
chat window background. It contains no Lua code and no API; it is a pure style
add-on you can keep, edit or remove.

## Overview [#overview]

| | |
| --- | --- |
| Resource | `esx_chat_theme` |
| Side | Client (NUI styles for `chat`) |
| Dependencies | The cfx `chat` resource (not declared in the manifest) |
| Config | None, edit `style.css` |
| Required | No |
| Game | `common` |

## How it works [#how-it-works]

The cfx chat resource scans running resources for a `chat_theme` entry in their
`fxmanifest.lua` and loads the listed files into the chat page. esx_chat_theme
registers a theme named `esx`:

```lua title="fxmanifest.lua"
chat_theme 'esx' {
    styleSheet = 'style.css',
    script = 'shadow.js',
    msgTemplates = {
        default = '<b>{0}</b><span>{1}</span>'
    }
}
```

| Part | Purpose |
| --- | --- |
| `style.css` | Fonts (`Font2`, `Font2_cond` loaded from `runtime.fivem.net`), transparent `.chat-window`, message size and spacing |
| `shadow.js` | Injects an SVG drop shadow filter (`#svgDropShadowFilter`) that `.msg` uses for readable text on any background |
| `msgTemplates.default` | Renders the author (`{0}`) in bold followed by the message (`{1}`) |

## Customization [#customization]

Change the look in `style.css`. The `.msg` rule controls most of it:

```css title="style.css"
.msg {
    font-family: Font2, sans-serif;
    color: #ffffff;
    font-size: calc(1.7vh);
    filter: url(#svgDropShadowFilter);
    line-height: calc(2.7vh * 1.2);
    margin-bottom: 0;
}
```

The font files are loaded from `runtime.fivem.net` at runtime. If that host is
unreachable, the chat falls back to `sans-serif`.

## Install order [#install-order]

Start `chat` before the theme. The official recipe starts `chat` first and the
theme as part of `[core]`:

```bash title="server.cfg"
ensure chat
ensure oxmysql
ensure esx_lib
ensure es_extended
ensure [core]
```

## Common issues [#common-issues]

- **Theme has no effect.** The `chat` resource is not running, or you use a
  third-party chat that ignores `chat_theme` entries.
- **Styles clash with another theme.** Several `chat_theme` resources can be
  active at once and their CSS stacks. Stop the one you do not want.

## Related [#related]

- [Core resources overview](/docs/core)
- [server.cfg](/docs/getting-started/server-cfg)
- [Installation](/docs/getting-started/installation)