> 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-chat/ui-theme-and-emojis.md).

# UI Theme And Emojis

Customize dm-chat colours, message cards, media accents, fonts, and the emoji picker.

The customer-facing theme is configured in `Config.Colors` inside `config.lua`. Save the file and restart `dm-chat` after making changes.

## Main accent

```lua
Config.Colors = {
    primary = '#84cc16',
    primaryDark = '#65a30d',
    primaryHover = '#4d7c0f',
    -- remaining groups...
}
```

These three values control the main lime accent, its darker state, and hover state. Use valid CSS colours such as hex, `rgb(...)`, or `rgba(...)` strings.

## Colour groups

| Group         | Settings                                                                                        | Used for                                  |
| ------------- | ----------------------------------------------------------------------------------------------- | ----------------------------------------- |
| `backgrounds` | `panel`, `message`, `console`, `meOocSystem`, `thought`, `emoji`, `suggestion`                  | Main chat surfaces and popup styles       |
| `backgrounds` | `musicGradientStart`, `musicGradientEnd`, `videoGradientEnd`                                    | Media-card gradients                      |
| `borders`     | `light`, `message`, `thought`, `console`, `videoCard`                                           | Separators and card outlines              |
| `text`        | `primary`, `secondary`, `message`, `name`, `console`, `thought`, `emoji`                        | Message, label, console, and popup text   |
| `badges`      | `ooc`, `me`, `do_badge`                                                                         | Roleplay message badges                   |
| `icons`       | `videoBg`, `videoColor`, `spotifyBg`, `spotifyColor`                                            | Media-provider icons                      |
| `console`     | `prompt`, `promptShadow`, `text`, `time`, `copyBtn`, `copyBtnHover`, `copyBtnHoverBg`, `copied` | Server-console messages and copy feedback |
| `accents`     | Input, suggestion, emoji, and music values                                                      | Interactive and selected states           |

Keep every group and key in place. The NUI maps these names to CSS variables; renaming a key leaves the corresponding interface value unchanged.

## Example: blue accent

```lua
Config.Colors.primary = '#3b82f6'
Config.Colors.primaryDark = '#1d4ed8'
Config.Colors.primaryHover = '#2563eb'

Config.Colors.accents.inputCornerHover = '#60a5fa'
Config.Colors.accents.suggestionActiveBorder = '#3b82f6'
Config.Colors.accents.musicIconBg = 'rgba(59, 130, 246, 0.15)'
Config.Colors.accents.musicIconBorder = 'rgba(59, 130, 246, 0.4)'
```

## Emoji picker

```lua
Config.EnableEmojis = true

Config.Emojis = {
    '😀', '😂', '❤️', '👍', '👎', '👋'
}
```

Add, remove, or reorder quoted emoji strings. Setting `EnableEmojis` to `false` hides the picker button; it does not change the other popup commands.

{% hint style="info" %}
Keep the file encoded as UTF-8 so emoji characters are not corrupted.
{% endhint %}

## Advanced web styling

The interface uses:

* `web/style.css` for layout, fonts, cards, and popup animations
* `web/index.html` for the interface structure
* `web/script.js` for behavior and media playback

No build step is required after editing these files. Restart `dm-chat` and reopen chat to reload the NUI.

Google Fonts and Font Awesome are loaded from public CDNs. A server or client network filter that blocks those hosts can cause fallback fonts or missing icons even when the Lua colour settings are correct.