> For the complete documentation index, see [llms.txt](https://jiffyjrdevelopment.gitbook.io/jiffyjrdevelopmentdocs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jiffyjrdevelopment.gitbook.io/jiffyjrdevelopmentdocs/jiffy-jr-development-docs/jiffy-minigames/styling.md).

# Styling

All visual properties are driven by CSS custom properties (variables) that are injected into the NUI from `Config.Style` in `editable/config.lua`. You can fully re-skin the UI without touching any source files.

***

## Config.Style reference

```lua
Config.Style = {
    AccentColor = '#ff1f1f',  -- primary brand color
    Background  = '#0c0c0d',  -- outer page background
    Panel       = '#161617',  -- card / game panel background
    Text        = '#f5f5f5',  -- primary text
    Muted       = '#8a8a8f',  -- secondary / label text
    Success     = '#37d67a',  -- success states, win zones, completion
    Danger      = '#ff1f1f',  -- fail states, error indicators
}
```

Changes take effect on the **next resource restart** (or `ensure jiffy-minigames`).

***

## What each variable controls

| Variable       | Where it appears                                                                                                                         |
| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| `--accent`     | Needle (Circle), active pins (Lockpick), zone glow (Safecrack), grid highlights (Hackgrid), active cell borders (Pattern), progress bars |
| `--success`    | Win state flash, correct indicators, bar zone fill                                                                                       |
| `--danger`     | Fail state flash, wrong indicators, mistake pips                                                                                         |
| `--background` | Outer HTML body (transparent NUI — this is rarely visible)                                                                               |
| `--panel`      | Game stage background cards                                                                                                              |
| `--text`       | All primary labels and values                                                                                                            |
| `--muted`      | Secondary labels, timers, sub-headers                                                                                                    |

***

## Custom theme example

A blue/teal hacker aesthetic:

```lua
Config.Style = {
    AccentColor = '#00e5ff',
    Background  = '#060a0f',
    Panel       = '#0a111a',
    Text        = '#e0f7fa',
    Muted       = '#546e7a',
    Success     = '#00e676',
    Danger      = '#ff1744',
}
```

A gold/prestige theme:

```lua
Config.Style = {
    AccentColor = '#ffd700',
    Background  = '#0e0c07',
    Panel       = '#1a1608',
    Text        = '#fff8dc',
    Muted       = '#a08c4a',
    Success     = '#adff2f',
    Danger      = '#ff4500',
}
```

***

## Advanced: editing style.css

If the CSS variables don't cover what you need, `web/style.css` is not obfuscated and can be edited directly. The variables are declared in the `:root` block near the top and overridden per-game as needed.

{% hint style="warning" %}
Edits to `web/style.css` will be overwritten if you reinstall or update the resource. Keep a backup or diff of your changes.
{% endhint %}