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

# Theming

> Recolour and rebrand the bank app - accent, logo, palette, and backdrop - all from one file.

Everything the bank app paints comes from `config/theme.lua`. Colours are plain hex strings (e.g. `'#00E5FF'`) - edit in place, keep the quotes, and restart `awoken_banking`. The app rebuilds its look on start; there is no build step.

## The settings

| Option             | What it does                                                                                                                                                                                                                                               | Default           |
| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- |
| `primaryColor`     | Brand accent - buttons, active tabs, and links.                                                                                                                                                                                                            | `#00E5FF`         |
| `useConvar`        | Follow the shared `awoken:primaryColor` convar instead of `primaryColor`. Set the convar once with `setr awoken:primaryColor "#00E5FF"` in `server.cfg` and every Awoken resource shares one accent. Unset convar or `false` falls back to `primaryColor`. | `true`            |
| `logo`             | Header image. A filename served from `web/dist/` (`web/public/` in dev), a full `https://` URL, or `''` for the text wordmark.                                                                                                                             | `awoken-logo.png` |
| `colors.positive`  | Deposits and success states.                                                                                                                                                                                                                               | `#10B981`         |
| `colors.negative`  | Withdrawals, danger, and errors.                                                                                                                                                                                                                           | `#F43F5E`         |
| `colors.warning`   | Warnings and pending states.                                                                                                                                                                                                                               | `#F59E0B`         |
| `colors.info`      | Informational notices.                                                                                                                                                                                                                                     | `#0EA5E9`         |
| `colors.line`      | Hairline borders and dividers (drawn at low opacity).                                                                                                                                                                                                      | `#FFFFFF`         |
| `colors.surface`   | Neutral ramp from `0` to `950`. `0`–`500` are text shades (light to mid); `600`–`950` are the panel and shell shades - recolour these to change the background.                                                                                            | see below         |
| `backdrop.color`   | Tint laid over the game while the app is open.                                                                                                                                                                                                             | `#05070A`         |
| `backdrop.opacity` | Tint strength, `0` (clear) to `1` (solid).                                                                                                                                                                                                                 | `0.50`            |

```lua config/theme.lua theme={"dark"}
surface = {
    ['0']   = '#F7F7F7', ['50']  = '#EDEDED', ['100'] = '#DEDEDE', ['200'] = '#C8C8C8',
    ['300'] = '#B0B0B0', ['400'] = '#969696', ['500'] = '#7A7A7A', ['600'] = '#2B2B2B',
    ['700'] = '#1F1F1F', ['800'] = '#161616', ['900'] = '#0F0F0F', ['950'] = '#0A0A0A',
},
```

## Good to know

* Keep the surface ramp's light-to-dark order; the app reads `600`–`950` as its darkest surfaces, so those set the background.
* There is no blur option. FiveM's browser layer can't blur the game, so the backdrop dims rather than blurs.