Skip to main content
TRACK B·INTERFACES (NUI)·Verified June 2026 · Lua 5.4 · ox_lib 3.x
Learning with an AI assistant?
Copies this lesson plus 2026 ground rules (no lua54 'yes', Cfx.re Portal, correct callback signatures) as a ready-to-paste mentor prompt.

Reskin a script's UI colors without breaking it

Most scripts let you change how they look without ever opening the Lua. The colors of a HUD, a menu, or a notification almost always live in a CSS file inside the script's NUI folder. In this lesson you find that file, change a couple of color values, refresh in game, and watch the panel repaint, all without touching a single line that makes the script work. The rule that keeps you safe is simple: change values, never structure.

You'll build
A recolored HUD panel for a real script: same layout, same code, new palette, swapped by editing two CSS variables.
Time
~16 minutes
You need
A local FiveM practice server you can restart, a script that ships an HTML NUI (its folder has an html/, web/, or ui/ directory), and a text editor (VS Code is free).
You'll learn
Where a script's NUI lives, what a CSS custom property is, how to change values without touching structure, how to refresh in game, and why a built React NUI must be rebuilt while a raw-HTML NUI is edited directly.

Watch

RED: designing FiveM interfaces that feel good to use.
BEFORE YOU START

Keep reading the full lesson

Sign in to start, then unlock every step of this lesson and the full FiveM School with a membership.

Still ahead in this lesson
  • Where a script's UI actually lives
  • Reskin it
  • How it works
  • Common mistakes
  • What you can do now
  • Try it yourself
Sign in with Discord Browse the school

The remainder of Reskin a script's UI colors is available to FiveM School members.

PREVIOUS
DUI: render HTML on 3D surfaces