# Theme presets

The theme lives **only** in the two token blocks at the top of `dashboard.html`:
`body{...}` (light) and `body.dark{...}` (dark). To apply a theme, replace both
blocks. Never edit component CSS, layout or script to restyle. Every palette
ships with both blocks, so dark mode never looks broken.

Status colours `--ok`, `--warn` and `--bad` are semantic (done / in progress or
attention / failed). Keep them unless the user gives their own.

Component tokens say where a preset puts its brand:
`--header-bg`, `--header-ink`, `--header-muted` (top bar), `--primary-bg`
(primary buttons), `--nav-active-bg` (active nav row and avatar),
`--progress-bg` (progress fill), `--blur` (glass blur, or `none` for flat),
`--font` (body) and `--font-display` (headings, figures, buttons).

## 1. Tebra Sky (the template default)

Blue glass cards on a sky gradient. Segoe UI. Accent `#3d9bd0`.

```css
body{
  --bg-top:#8fc9e8; --bg-mid:#bfe3f2; --bg-bottom:#eaf6fb;
  --glass:rgba(255,255,255,.60); --glass-strong:rgba(255,255,255,.78); --border:rgba(255,255,255,.9);
  --ink:#1c2b33; --muted:#5c7382; --accent-dark:#16202a;
  --accent:#3d9bd0; --accent-2:#5cb2e2; --accent-soft:#d4edfa; --accent-soft-2:#a9d8ee;
  --ok:#1f9d57; --ok-bg:#e6f6ec; --warn:#b7791f; --warn-bg:#fbf1dd; --bad:#c0392b; --bad-bg:#fdecea;
  --font:'Segoe UI',-apple-system,BlinkMacSystemFont,sans-serif; --font-display:var(--font);
  --header-bg:var(--glass-strong); --header-ink:var(--ink); --header-muted:var(--muted);
  --primary-bg:linear-gradient(180deg,var(--accent-2),var(--accent));
  --nav-active-bg:linear-gradient(135deg,var(--accent),var(--accent-dark));
  --progress-bg:var(--ok); --blur:blur(14px);
}
body.dark{
  --bg-top:#0f1b26; --bg-mid:#13212e; --bg-bottom:#182a38;
  --glass:rgba(22,34,44,.72); --glass-strong:rgba(30,45,58,.85); --border:rgba(120,160,190,.22);
  --ink:#e6eef4; --muted:#8fa6b4; --accent-dark:#2e5d80;
  --accent-soft:#2e5d90; --accent-soft-2:#1d3d5e;
  --ok:#2fbf72; --ok-bg:rgba(31,157,87,.16); --warn:#d9a13c; --warn-bg:rgba(183,121,31,.16);
  --bad:#e05a4b; --bad-bg:rgba(192,57,43,.16);
}
```

## 2. Superbill Ember

Flat surfaces. The brand gradient `#ff3049` → `#f26b21` appears **only** on the
top bar, primary buttons, the active nav row and the progress fill. Nothing else
gets it. Sora for display, IBM Plex Sans for body.

Also add this line inside `<head>`, before `<style>`. Offline (for example in a
PyQt app with no internet), the fonts fall back to Segoe UI, which is fine.

```html
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Sora:wght@600;700;800&display=swap">
```

```css
body{
  --bg-top:#f4f3f7; --bg-mid:#f4f3f7; --bg-bottom:#f4f3f7;
  --glass:#ffffff; --glass-strong:#f7f6fa; --border:#e2dfe9;
  --ink:#18151f; --muted:#66607a; --accent-dark:#18151f;
  --accent:#ff3049; --accent-2:#f26b21; --accent-soft:#f7f6fa; --accent-soft-2:#e2dfe9;
  --ok:#1f9d57; --ok-bg:#e6f6ec; --warn:#b7791f; --warn-bg:#fbf1dd; --bad:#c0392b; --bad-bg:#fdecea;
  --font:'IBM Plex Sans','Segoe UI',-apple-system,sans-serif; --font-display:'Sora','Segoe UI',sans-serif;
  --header-bg:linear-gradient(100deg,#ff3049,#f26b21); --header-ink:#ffffff; --header-muted:rgba(255,255,255,.85);
  --primary-bg:linear-gradient(115deg,#ff3049,#f26b21);
  --nav-active-bg:linear-gradient(100deg,#ff3049,#f26b21);
  --progress-bg:linear-gradient(90deg,#ff3049,#f26b21); --blur:none;
}
body.dark{
  --bg-top:#0a0912; --bg-mid:#0a0912; --bg-bottom:#0a0912;
  --glass:#151220; --glass-strong:#1b1727; --border:#2a2438;
  --ink:#f3f1f8; --muted:#8d87a0; --accent-dark:#100e1a;
  --accent-soft:#1b1727; --accent-soft-2:#2a2438;
  --ok:#2fbf72; --ok-bg:rgba(31,157,87,.16); --warn:#d9a13c; --warn-bg:rgba(183,121,31,.16);
  --bad:#e05a4b; --bad-bg:rgba(192,57,43,.16);
}
```

## 3. Custom (one brand hex)

Start from the Tebra Sky blocks above, then derive the accent family from the
user's brand colour:

```
python <skill>/templates/palette.py "#7a3cff"
```

It prints the `--accent`, `--accent-2`, `--accent-dark`, `--accent-soft` and
`--accent-soft-2` values for both blocks, then a contrast table for light and dark:
- white button text on the accents, at least 3:1;
- accent-coloured text on the page, at least 3:1;
- ink on the soft buttons, at least 4.5:1;
- log text on the log box, at least 4.5:1.

If the brand colour is too light or too dark to read, the script nudges it until
every check passes. Paste the printed tokens over the same tokens in both blocks.
Show the user the contrast table, and say so if their colour was nudged.
Keep ok/warn/bad unless the user gives their own.