> For the complete documentation index, see [llms.txt](https://mango-5m.gitbook.io/mango5m-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mango-5m.gitbook.io/mango5m-docs/free-resources/mango-notify/configuration/themes-and-styling.md).

# Themes and Styling

Shipped themes, registering your own at runtime, and restyling individual notifications.

A theme is a set of style overrides applied on top of the config defaults. Mango Notify ships with `dark` (the base look), `light`, `police`, and `ems`, and you can register more at runtime.

## Shipped themes

```lua
Config.DefaultTheme = 'dark'

Config.Themes = {
    dark = {},                            -- base look, uses the config values
    light = {
        background       = 'rgba(245, 246, 250, 0.92)',
        border           = 'rgba(0, 0, 0, 0.08)',
        titleColor       = '#111318',
        descriptionColor = '#4A4F5C',
        subtitleColor    = '#7A7F8C',
    },
    police = { accent = '#3B82F6', border = 'rgba(59, 130, 246, 0.35)' },
    ems    = { accent = '#FF4B4B', border = 'rgba(255, 75, 75, 0.35)' },
}
```

## Using themes

```lua
-- switch the default theme for all future notifications
exports.mango_notify:SetTheme('police')

-- register a new theme at runtime (from any resource)
exports.mango_notify:RegisterTheme('halloween', {
    background = 'rgba(20, 10, 0, 0.85)',
    accent     = '#FF7A00',
})

-- apply a theme to a single notification only
exports.mango_notify:Notify({ theme = 'ems', title = 'Unit dispatched' })
```

## Theme / style keys

Both themes and per-notification `style` tables accept the same keys:

| Key                | Styles                              |
| ------------------ | ----------------------------------- |
| `background`       | Panel background colour             |
| `border`           | Panel border colour                 |
| `accent`           | Accent line / progress colour       |
| `titleColor`       | Title text                          |
| `descriptionColor` | Body text                           |
| `subtitleColor`    | Subtitle and secondary text         |
| `progressColor`    | Progress bar (falls back to accent) |
| `shadow`           | Panel drop shadow                   |
| `font`             | Font stack                          |

## Per-notification styling

For one-off looks, pass a `style` table directly — it beats the theme for that notification:

```lua
exports.mango_notify:Notify({
    title = 'VIP reward',
    style = {
        background       = '#101114',
        border           = '#31343B',
        accent           = '#FFD700',
        titleColor       = '#FFFFFF',
        descriptionColor = '#C5C5C5',
    },
})
```

You can also pass `class = 'my-css-class'` to attach your own CSS class to the panel — style it by adding rules to `html/css/style.css`.

{% hint style="info" %}
Badge colours are separate: `badge = 'Priority 2', badgeColor = '#FF4B4B'` — the badge background defaults to the accent when `badgeColor` is omitted.
{% endhint %}