Theming (Config.Color)

Last updated on

The Desktop and Portable NUI read their accent colors from Config.Color on load and apply them as CSS variable overrides (web/src/lib/theme.ts) — no CSS editing required. Same shape as dnd_economy's own Config.Color, so the two resources stay visually consistent if you theme them the same way.

Default palette

Config.Color = {
    mainColor      = '#34b864', -- primary accent: active states, highlights, online status
    mainColorLight = '#3ddc84', -- lighter tint: hover glows, gradient light stops
    buttonColor    = '#3b82f6', -- secondary accent: info/button highlights
    successColor   = '#34b864', -- accept actions, on-duty status
    warningColor   = '#fbbf24', -- pending/attention states
    dangerColor    = '#ef4444', -- reject/error states
}

What each key controls

Structural surfaces — window chrome, backgrounds, borders — aren't themeable through this config; only the brand/status accent tokens above are.

Applying it

1. Edit the Config.Color block in shared/config/core.lua.
2. Restart the resource — the NUI fetches this fresh from Lua on every Desktop/Portable open, no rebuild needed.

Coverage

Icons across every Desktop app and the Portable tablet use MDI (@mdi/js) SVGs instead of emoji, sharing the same accent tokens above — status dots, toggle icons, and action buttons all follow whatever palette you configure here.