Theming
Make the artwork look like part of your product — set your palette once, and every image arrives in it.
There is nothing to recolour, export, bundle, or keep a second copy of.
Change your palette later and the images you embedded months ago come back in the new colours on their own — no re-export, no re-upload, and no deploy on your side.
What you control
A theme is one palette, and it paints every product that renders at request time. The same slot does the equivalent job on each:
| Colour | On a muscle diagram | On an equipment icon |
|---|---|---|
silhouette | the figure’s outline | the machine’s outline |
base | muscle that is not highlighted | the body of the machine |
primary | the muscles you name in primary | the pads, grips and plates |
secondary | the muscles you name in secondary | — |
The images you request already arrive in your colours. A key carries a theme, and the usual case needs nothing in the URL.
Use more than one theme
Name a theme per request when you need more than one — a light set and a dark set, or a different palette per gym, brand or tenant:
/v1/{key}/body/male/front.webp?primary=delts&theme={theme-id}Your own themes are selectable this way once published, along with the ready-made
ones below. A theme that names nothing published still returns an image, painted in
the theme on the key, and names what it did not recognise in x-theme-unknown.
Show a resting state and a selected one
A picker needs two looks: the artwork when nothing is chosen, and the artwork when something is. Ready-made themes come in a pair for each.
Use a neutral for the resting state. It highlights without a hue and keeps the artwork quieter than your own controls:
| Theme | theme | Use it on |
|---|---|---|
| Neutral Dark | thm_neutral_dark | a dark interface |
| Paper | thm_paper | a light interface |
Use a highlight for the chosen one. Both share their outline and base with
thm_neutral_dark, and selection repaints what is highlighted and nothing else:
| Theme | theme | Tone |
|---|---|---|
| Sky | thm_highlight_dark_sky | cool |
| Amber | thm_highlight_dark_amber | warm |
Selecting a row is one parameter:
/v1/{key}/equipment/icon/leg-press-45.png?theme=thm_neutral_dark
/v1/{key}/equipment/icon/leg-press-45.png?theme=thm_highlight_dark_skyMuscle diagrams take the same pair — a summary of what was worked names the muscles
in primary against a highlight theme, and the same figure used as a chooser sits in
the neutral until somebody picks.
To use your brand colour instead, publish a theme whose silhouette and base match
the neutral, and set primary to your accent. A highlight theme that also moves the
base repaints the whole drawing, which reads as a flicker rather than a selection.
Edit a theme without publishing it
Themes are edited and published separately. A half-finished palette never reaches your users, and editing a draft does not change what your live URLs return until you publish it.
Expect a published change to take up to two minutes to appear everywhere — see caching.
What happens when an allowance runs out
Crossing your monthly allowance does not break your images. They keep rendering in the house palette until the allowance resets or is raised: your users see a colour change, not a missing image, and nothing you built stops working.