> 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-ox-inventory-rework-v2/ui-themes.md).

# UI Themes

Configure the inventory colour theme, layout options, and independent slot image, label, and quantity scaling from data/ui.lua.

#### Changing the Theme

Open `data/ui.lua` and change the `activeTheme` value:

```lua
local activeTheme = "lime"
```

Restart the resource after saving.

***

#### Available Themes

30 themes are included:

|          |           |            |           |             |
| -------- | --------- | ---------- | --------- | ----------- |
| `lime`   | `emerald` | `blue`     | `purple`  | `rose`      |
| `orange` | `yellow`  | `cyan`     | `pink`    | `silver`    |
| `red`    | `teal`    | `indigo`   | `violet`  | `amber`     |
| `sky`    | `fuchsia` | `green`    | `gold`    | `slate`     |
| `coral`  | `mint`    | `lavender` | `crimson` | `turquoise` |
| `maroon` | `bronze`  | `electric` | `neon`    | `blood`     |

***

#### Theme Variables

Each theme overrides a set of CSS custom properties applied to the root element:

| Variable                    | Controls                              |
| --------------------------- | ------------------------------------- |
| `--color-primary`           | Main accent colour                    |
| `--color-primary-dark`      | Darker shade of accent                |
| `--color-primary-deep`      | Deep background tint                  |
| `--color-body-scan`         | Body scan animation line colour       |
| `--color-slot-border-hover` | Slot border on mouse hover            |
| `--color-tab-active-border` | Active category tab underline         |
| `--color-tab-active-bg`     | Active tab background fill            |
| `--color-menu-highlight`    | Context menu highlighted row          |
| `--accent`                  | Full-opacity accent (buttons, badges) |
| `--accent-label`            | Item name label colour                |
| `--drag-border`             | Border colour while dragging an item  |
| `--slot-hover-border`       | Slot border on hover (empty slots)    |
| `--slot-has-item-border`    | Slot border when containing an item   |
| `--accent-glow-28`          | Glow at 28% opacity                   |
| `--accent-glow-08`          | Glow at 8% opacity                    |
| `--accent-grad-35`          | Gradient stop at 35% opacity          |
| `--accent-grad-16`          | Gradient stop at 16% opacity          |
| `--accent-grad-0`           | Transparent gradient stop             |

***

#### Creating a Custom Theme

Add a new key to the `themes` table in `data/ui.lua` and set `activeTheme` to match:

```lua
local activeTheme = "forest"

local themes = {
    forest = {
        ["--color-primary"]           = "#2d6a4f",
        ["--color-primary-rgb"]       = "45, 106, 79",
        ["--color-primary-dark"]      = "#1b4332",
        ["--color-primary-dark-rgb"]  = "27, 67, 50",
        ["--color-primary-deep"]      = "#081c15",
        ["--color-primary-deep-rgb"]  = "8, 28, 21",
        ["--color-body-scan"]         = "#52b788",
        ["--color-slot-border-hover"] = "#2d6a4f",
        ["--color-tab-active-border"] = "#2d6a4f",
        ["--color-tab-active-bg"]     = "#1b4332",
        ["--color-tab-active-bg-rgb"] = "27, 67, 50",
        ["--color-menu-highlight"]    = "#52b788",
        ["--color-menu-highlight-rgb"]= "82, 183, 136",
        ["--accent"]                  = "rgba(45, 106, 79, 1)",
        ["--accent-lime"]             = "#52b788",
        ["--accent-label"]            = "#95d5b2",
        ["--drag-border"]             = "#95d5b2",
        ["--slot-hover-border"]       = "#2d4a3e",
        ["--slot-has-item-border"]    = "#2a4038",
        ["--accent-glow-28"]          = "rgba(45, 106, 79, 0.28)",
        ["--accent-glow-08"]          = "rgba(45, 106, 79, 0.08)",
        ["--accent-grad-35"]          = "rgba(45, 106, 79, 0.35)",
        ["--accent-grad-16"]          = "rgba(45, 106, 79, 0.16)",
        ["--accent-grad-0"]           = "rgba(45, 106, 79, 0)",
    },
}
```

***

#### Other data/ui.lua Options

Besides the theme palette, the same file's return table controls the overall UI layout, slot content scaling, and permission flags:

```lua
-- data/ui.lua
return {
    layout               = "loadout",
    loadoutSideTilt      = true,
    disableUseInBackpack = true,
    allowItemRename      = true,
    allowBackpackRename  = true,

    slotContentScale = {
        image    = 1.0,
        label    = 1.0,
        quantity = 1.0,
    },

    colors               = mergedColors,
}
```

| Key                    | Values                     | Purpose                                                                                                                |
| ---------------------- | -------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| `layout`               | `"classic"` \| `"loadout"` | Selects the overall inventory UI layout — see the overview page                                                        |
| `loadoutSideTilt`      | `true` / `false`           | Loadout layout only — tilts the left/right inventory panels for a 3D perspective effect. Set `false` for a flat layout |
| `disableUseInBackpack` | `true` / `false`           | Prevents using/consuming items while they're inside a backpack                                                         |
| `allowItemRename`      | `true` / `false`           | Lets players rename individual items                                                                                   |
| `allowBackpackRename`  | `true` / `false`           | Lets players rename equipped backpacks                                                                                 |
| `slotContentScale`     | Multiplier table           | Independently scales the item image, item label, and quantity shown inside slots                                       |

***

#### Scaling Slot Content

Use `slotContentScale` in `data/ui.lua` to resize individual parts of every item slot without changing their original base sizes:

```lua
slotContentScale = {
    image    = 1.20,
    label    = 1.10,
    quantity = 1.15,
},
```

| Multiplier | Controls                                  |
| ---------- | ----------------------------------------- |
| `image`    | The item image displayed inside the slot  |
| `label`    | The item name displayed at the slot edge  |
| `quantity` | The item stack quantity displayed in-slot |

The value is multiplied by the component's current size:

* `1.0` keeps the original size.
* `1.2` makes the component 20% larger.
* `0.9` makes the component 10% smaller.

The image remains centred while it grows. Scaling is applied consistently to inventory, utility, clothing, shop, hotbar, notification, and drag-preview slots.

{% hint style="info" %}
To turn custom scaling off, set all three values back to `1.0`. Very large multipliers can overlap other information or be clipped by the slot boundary.
{% endhint %}

Restart `ox_inventory` after changing these values.