Modern UI

Modern UI v2 introduces a full theming system: every color, corner radius, font, shadow, border width, and panel opacity is customizable - globally or per component - through an in-game editor with live previews of the real components as you edit. Themes layer in a simple resolution order, and they stack: Built-in defaults → server theme → personal theme Anything not customized at one layer inherits from the layer below it.

Server Theme

Admins run /uitheme to open the theme editor and style the UI for the entire server. The theme is saved to data/theme.json inside the resource and automatically replicated to every player - including players who join later.

The /uitheme command requires the lation_ui.admin ACE permission - see the installation guide for setup instructions.

Personal Themes

If enabled, players can run /uisettings to personalize their own UI. Personal themes are stored client-side per player via FiveM KVP - no database required - and layer on top of your server theme. Personal themes are disabled by default. To enable them, add the following convar to your server.cfg:

setr lation_ui:allowUserThemes 1

The Editor

The editor is the same for admins and players - only where the theme is saved differs:

General - presets, global colors, corner radius, font, UI scale, panel opacity, border width, shadow, and reduced motion
Components - per-component overrides for all 13 components; anything unset inherits from the general theme
Live preview - the preview pane renders the real components, so every change is shown exactly as it will look in-game
Presets - distinct built-in themes to use as-is or as a starting point

Surfaces

Panels are built from five surface colors:

Surface - the panel background
Header / Footer - the bands at the top and bottom of panels
Hover - hovered and selected rows
Elevated - inputs, chips and progress tracks
Well - recessed areas: key hints, list menu progress bars, and the background behind cards in Modern Banking and Modern Shops

Each one is set on its own. If you change Surface, set Well too so the background behind cards matches - the built-in presets already set all five. The editor includes Share Theme and Import Theme actions. Share Theme produces a single copy-paste code containing your entire theme - send it to anyone and they can paste it under Import Theme to get your exact look. Codes work across players and across servers.

Exports

For scripts that want to read or apply themes programmatically:

client
server

-- Returns the currently resolved theme (nil = defaults)
local theme = exports.lation_ui:getTheme()

-- Applies a theme at runtime without persisting it
-- Pass nil to restore the resolved/persisted theme
exports.lation_ui:setTheme(theme)

-- Returns the saved server theme (nil = none)
local theme = exports.lation_ui:getServerTheme()

-- Sets, persists & broadcasts a server theme (nil clears it)
exports.lation_ui:setServerTheme(theme)

Theme format

Both exports take the same table the editor saves. Every key is optional - anything left out inherits as usual.

exports.lation_ui:setServerTheme({
    version = 1,
    global = {
        accent = '#8B5CF6',
        surface = '#0E0E14',
        surfaceDeep = '#060609', -- the well: background behind cards
        radius = 14,
        shadow = 'strong',
    },
    components = {
        notify = { accent = '#10B981' },
    },
})

Colors take a hex code (#RGB or #RRGGBB):

Key	Editor label	Colors
`accent`	Accent	Buttons, highlights and active states
`accentSoft`	-	Lighter accent. Follows `accent` if left out
`surface`	Surface	Panel background
`surfaceBand`	Header / Footer	Header and footer bands
`surfaceHover`	Hover	Hovered and selected rows
`surfaceElevated`	Elevated	Inputs, chips and tracks
`surfaceDeep`	Well	Recessed areas: key hints, list menu progress bars, the background behind cards
`line`	Border	Panel borders and dividers
`lineStrong`	Border (strong)	Input and chip borders
`lineHover`	-	Hovered borders
`content`	Text	Primary text
`contentSecondary`	Text (secondary)	Secondary text
`contentMuted`	Text (muted)	Placeholders and hints
`contentIcon`	-	Default icon color
`contentHeading`	Headings	Headings
`success`, `error`, `warning`	Success, Error, Warning	Status colors
`successSoft`, `errorSoft`, `warningSoft`	-	Lighter variants. Follow their base color if left out

Everything else:

Key	Values
`radius`	Corner radius in px, `0` to `24`
`fontFamily`	A font name, e.g. `"'JetBrains Mono', monospace"`
`uiScale`	`0.5` to `1.5`. `global` only
`opacity`	Panel opacity, `0.3` to `1`
`borderWidth`	Border width in px, `0` to `3`
`shadow`	`'none'`, `'soft'` or `'strong'`
`reducedMotion`	`true` or `false`. `global` only

components accepts the same keys (except the global-only ones) for notify, menu, listmenu, progress, textui, alert, input, radial, drawer, skillcheck, patternlock, signalbreach and timeline.

Events

To keep your own UI in step with Modern UI, listen for lation_ui:themeChanged on the client. It fires whenever the theme the player sees changes:

an admin saves or resets the server theme
the player saves or resets their personal theme in /uisettings
a script calls the setTheme export

-- theme is the full theme table (see Theme format above),
-- or nil when the built-in defaults are in use
AddEventHandler('lation_ui:themeChanged', function(theme)
    -- restyle your own UI here
end)

The event only reports changes. Read the current theme once when your script starts with exports.lation_ui:getTheme(), then use the event from there.

Weed

Coke

Meth

Chop Shop

Modern Shops

Money Laundering

Metal Detecting

Scuba Diving

Drug Sales

Banking

Interact

Modern UI - Theming

Server Theme

Personal Themes

The Editor

Surfaces

Exports

Theme format

Events

​Server Theme

​Personal Themes

​The Editor

​Surfaces

​Share Codes

​Exports

​Theme format

​Events

Server Theme

Personal Themes

The Editor

Surfaces

Share Codes

Exports

Theme format

Events