> 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-hustling/ui-theme.md).

# UI Theme

\`Dm-connectui\` features a built-in library of \\\*\\\*100 color themes\\\*\\\* that automatically customize the primary accent color gradients on your connection screen.

UI theme settings are in:

```
ui.lua
```

The active theme is controlled by:

```lua
local activeTheme = 'lime'
```

### Available Themes

```
lime
emerald
blue
purple
rose
orange
yellow
cyan
red
teal
```

Example:

```lua
local activeTheme = 'cyan'
```

### Theme Structure

Each theme changes CSS variables used by the NUI:

```lua
cyan = {
    ['--accent'] = '#06b6d4',
    ['--accent-soft'] = '#67e8f9',
    ['--sel-1'] = 'rgba(6, 182, 212, 0.30)',
    ['--sel-2'] = 'rgba(6, 182, 212, 0.12)',
    ['--esc-fill'] = 'rgba(6, 182, 212, 0.24)',
}
```

### Custom Theme

Add a new theme inside the `themes` table:

```lua
custom = {
    ['--accent'] = '#22c55e',
    ['--accent-soft'] = '#86efac',
    ['--sel-1'] = 'rgba(34, 197, 94, 0.30)',
    ['--sel-2'] = 'rgba(34, 197, 94, 0.12)',
    ['--esc-fill'] = 'rgba(34, 197, 94, 0.24)',
}
```

Then set:

```lua
local activeTheme = 'custom'
```

### Advanced Styling

Base UI variables are also defined in `ui.lua`:

```lua
local baseColors = {
    ['--text'] = '#ffffff',
    ['--panel'] = 'rgba(11, 12, 14, 0.78)',
    ['--panel-2'] = 'rgba(9, 10, 12, 0.84)',
    ['--muted'] = '#9b9b9b',
}
```

For deeper UI changes, edit:

```
web/style.css
```