> ## Documentation Index
> Fetch the complete documentation index at: https://lationscripts.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Modern UI - Theming

> Style every component with the in-game theme editor

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.

<Note>
  The `/uitheme` command requires the `lation_ui.admin` ACE permission - see the [installation guide](/docs/modern-ui/install) for setup instructions.
</Note>

## 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`:

```cfg theme={null}
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, font scale, panel opacity, border width, shadow, and reduced motion
* **Components** - per-component overrides for all 12 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

## Share Codes

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:

<Tabs>
  <Tab title="client">
    ```lua theme={null}
    -- 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)
    ```
  </Tab>

  <Tab title="server">
    ```lua theme={null}
    -- 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)
    ```
  </Tab>
</Tabs>