Theming
Color Scheme
Recolor the whole UI from variables.css.
The entire NUI is colored from a single file:
html/assets/css/variables.css
It defines CSS custom properties under :root. Every other stylesheet reads from these variables, so changing one value recolors the whole interface consistently.
This file stays editable in the protected release, so you can always retheme the UI.
How it's organized
The file has one active :root block at the top (the live theme), followed by several commented-out preset blocks (Yellow, Green, Blue, Red). To switch presets, see Presets.
variables.css
:root {
/* Main Accent (Yellow / Gold) */
--accent: #FFEF1F;
--accent-rgb: 255, 239, 31;
--accent-light: #FFFC65;
--accent-dark: #885D0B;
--accent-deep: #998F13;
/* ... derived colors, gradients, panel styles ... */
}
The two values you must keep in sync
The single most important rule:
--accent (hex) and --accent-rgb (comma-separated RGB) must describe the same color. Many derived colors use --accent-rgb inside rgba(...), so if they don't match, transparencies will look wrong.variables.css
--accent: #FFEF1F; /* hex */
--accent-rgb: 255, 239, 31; /* same color as r, g, b */
Core accent variables
| Variable | Example | Used for |
|---|---|---|
--accent | #FFEF1F | Primary accent (buttons, highlights). |
--accent-rgb | 255, 239, 31 | RGB form of --accent for rgba() usage. |
--accent-light | #FFFC65 | Lighter accent (icon gradients, hovers). |
--accent-dark | #885D0B | Darker accent (text gradients). |
--accent-deep | #998F13 | Deepest accent shade. |
Derived accent variables
These are built from --accent-rgb at different opacities — usually you don't need to edit them, they follow your accent automatically.
| Variable | Meaning |
|---|---|
--accent-muted | Accent at 35% opacity. |
--accent-glow | Accent at 75% (glows). |
--accent-soft | Accent at 25%. |
--accent-faint | Accent at 55%. |
--accent-65 | Accent at 65%. |
Radial background variables
Used for soft radial backgrounds behind panels.
| Variable | Meaning |
|---|---|
--accent-radial-from | RGB start color of the radial. |
--accent-radial-to | RGB end color of the radial. |
--accent-radial-05/12/14 | Pre-built radial gradients at 5% / 12% / 14% opacity. |
Inset glow & border
| Variable | Meaning |
|---|---|
--accent-inset-rgb / --accent-inset | Inner glow color. |
--accent-border-rgb / --accent-border | Accent border color. |
Gradients
| Variable | Meaning |
|---|---|
--accent-gradient | Horizontal accent fade. |
--accent-gradient-text | Vertical accent → dark (text fills). |
--accent-gradient-icon | Vertical accent → light (icon fills). |
--accent-gradient-border | Border gradient. |
Danger / Close colors
The orange-red used for close buttons and errors. It is separate from the accent so it stays red regardless of your theme.
| Variable | Example | Used for |
|---|---|---|
--danger | #FF5E1F | Close / destructive actions. |
--danger-rgb | 255, 94, 31 | RGB form. |
--danger-dark | #993515 | Darker danger. |
--danger-soft | — | Danger at 45%. |
--danger-bg / --danger-bg-hover | — | Danger button backgrounds. |
--danger-glow | — | Danger glow. |
--danger-gradient-border | — | Danger border gradient. |
Panel & layout
| Variable | Example | Meaning |
|---|---|---|
--hue-rotate | 0deg | Global hue shift applied to certain elements. |
--panel-border-rgb / --panel-border | — | Outer container border color. |
--panel-radius | 0.521vw | Corner radius of panels. |
--panel-border-width | 0.26vw | Panel border thickness. |
vw units keep the UI scaling proportional across resolutions — prefer keeping these as vw.Continue to Presets or Custom Colors.