Rpa_Skills/skills/rpa-dashboard-no-ai/templates/themes.md

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.

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.

<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">

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.