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

# Themes

> Seven shipped themes, full JSON schema, hot-reload editor.

Each theme is a JSON file under `themes/`. Edit, run `/reloadthemes`, see
changes without restarting.

## Shipped themes

| File              | Vibe                                               |
| ----------------- | -------------------------------------------------- |
| `default.json`    | **Slate** — neutral grays, the safe default        |
| `midnight.json`   | **Neon** — purple/pink glows, deep navy            |
| `crimson.json`    | **Ember** — red/orange warmth                      |
| `glass.json`      | **Glass** — semi-transparent with blur             |
| `catppuccin.json` | Pastel Catppuccin Mocha palette                    |
| `samp.json`       | Retro **SA:MP** look — text-only, monospace        |
| `ghostty.json`    | **Console** — terminal aesthetic with bundled font |

Players pick from in-game settings.

## JSON schema

```json themes/default.json theme={null}
{
  "name": "Slate",
  "description": "Neutral, readable, the default fxChat look.",
  "colors": {
    "background":      "rgba(15, 17, 26, 0.92)",
    "border":          "rgba(255, 255, 255, 0.08)",
    "text":            "#e5e7eb",
    "textMuted":       "#9ca3af",
    "accent":          "#8b5cf6",
    "input":           "rgba(0, 0, 0, 0.45)"
  },
  "radius": {
    "container": 16,
    "message":   12,
    "badge":     6
  },
  "shadow": {
    "container": "0 30px 60px -20px rgba(0,0,0,0.6)",
    "message":   "0 4px 12px -4px rgba(0,0,0,0.3)"
  },
  "animations": {
    "fadeMs":    180,
    "slideMs":   220
  },
  "badge": {
    "style":     "pill",
    "padding":   "2px 8px"
  },
  "textShadow":  "0 1px 2px rgba(0,0,0,0.4)"
}
```

| Field         | Notes                                                                               |
| ------------- | ----------------------------------------------------------------------------------- |
| `colors`      | `#hex`, `rgb()` or `rgba()`. `accent` drives badges and the active-theme indicator. |
| `radius`      | Border radii in px. `0` for sharp corners.                                          |
| `shadow`      | CSS shadow strings. Multi-shadow for layered depth.                                 |
| `animations`  | Durations in ms.                                                                    |
| `badge.style` | `pill` or `square`.                                                                 |
| `textShadow`  | Optional CSS `text-shadow` on message text.                                         |

## Adding a new theme

<Steps>
  <Step title="Copy a starting point">
    Duplicate `themes/default.json` to `themes/<your-name>.json`.
  </Step>

  <Step title="Edit values">
    Tweak colors, radii, shadows. The `name` and `description` fields show
    up in the picker.
  </Step>

  <Step title="Hot-reload">
    Run `/reloadthemes` in chat. Your theme appears in settings instantly.
  </Step>

  <Step title="Set as default (optional)">
    `Chat.DefaultTheme = '<your-name>'` in `configs/chat.lua`.
  </Step>
</Steps>

## In-game editor (`/chatadmin`)

Admins get:

* Live color picker
* JSON import / export
* Per-player font size slider (10 - 18 px)

<Note>
  Edits made through `/chatadmin` are session-only. Hit **Export JSON** and
  save the output to `themes/<your-name>.json` to persist.
</Note>