# Subscription colour theme

> The flowlock-theme header: FlowLock interface colours for the people on your subscription, the value format and the readability rules.

A provider can send a **colour theme** with the subscription: the colours of the FlowLock interface. The app shows it
to the people on your subscription only if they agree: when the theme first appears, FlowLock asks once, “<subscription
name> offers its own theme. Apply it?”. No provider ID is needed for a theme.

The format is FlowLock's own. FlowLock doesn't read other theme formats (Happ `color-profile` and others).

## How to send it

**Response header** (in Remnawave: one line in Response Headers):

```
flowlock-theme: accent=#1F7A4D/#4CC38A; bg=#F4F7F5/#0E1411; card=#FFFFFF/#17201B; text=#10231A/#E6EFE9; muted=#5B6B62/#93A39A
```

**Line in the body**: if you can't add headers, as the first line of a link-list or base64 subscription:

```
#flowlock-theme: accent=#1F7A4D/#4CC38A; bg=#F4F7F5/#0E1411
```

The header goes to every client: other clients skip an unknown header, so there is no need to guess by User-Agent.

## Value

Fields are separated by `;`, each is `key=colour`. A colour is `#RRGGBB` or a pair `#light/#dark`: the first for the
app's light theme, the second for the dark one. A single colour without `/` is used for both.

| Key      | What it colours                                   |
| -------- | ------------------------------------------------- |
| `accent` | buttons, switches, the connection ring, selection |
| `bg`     | window background                                 |
| `card`   | cards, panels, list rows                          |
| `text`   | main text                                         |
| `muted`  | secondary text                                    |

All keys are optional. Unknown keys and invalid colours are skipped, and the rest works. `none` or an empty value means
no theme. A header longer than 512 bytes or a body line longer than 1024 bytes isn't read (Remnawave cuts headers to
512 characters). The format has no images, logos, fonts, gradients or transparency, and never will.

## Readability

FlowLock checks contrast (WCAG) and adjusts the colours when needed: text at least 4.5:1 against the background and
cards, secondary text and accent at least 3:1, and the text on the accent is picked automatically. The background must
suit its side: a light one for the light theme, a dark one for the dark theme. A single `bg=#FFFFFF` suits only the
light side, and in the dark theme the app keeps its own background. If you want both sides, give a pair
`bg=#light/#dark`.

If anything was adjusted, the person sees “The provider theme was adjusted for readability” in the appearance
settings.

## What the person sees

- The person chooses the mode (system, light or dark theme); the provider's theme doesn't switch it.
- The theme changes along with subscription refreshes without asking again. If it disappears from the response, it
  disappears from the app too, and the person's own accent comes back.
- Windows and Linux use all five colours; macOS uses the accent, background and cards of the main window.
- The person's own theme wins over the provider's (see [“Themes and sharing them”](https://flowlock.cc/en/docs/user-themes.md)).