Custom Theme Builder
The Custom Theme Builder gives you direct control over every visual token on the bio page — background, card style, link colours, border radius, shadows, and Vidstack player chrome. Select Custom in the Theme section of the editor to access it.
How it works#
The builder is a set of fields organised into groups. Each field maps directly to a CSS variable on the bio page. When you change a value, the bio page renders using that value instead of a preset default. Fields marked Auto fall back to the preset’s built-in value — set them only if you want to override.
Page group#
These fields control the overall page and card appearance.
| Field | What it controls |
|---|---|
| Page background | The full-page background colour or gradient |
| Card top color | The top colour of the link card gradient |
| Card bottom color | The bottom colour of the link card gradient |
| Text color | Default text colour used across the page |
| Accent color | Highlight colour for interactive elements and featured states |
| Highlight background | Background colour when text is selected on the page |
| Highlight text color | Text colour when text is selected on the page |
Links group#
These fields control the individual link button style.
| Field | What it controls |
|---|---|
| Link background | Link button background (rgba — supports transparency) |
| Link hover background | Link button background on hover |
| Link text color | Text label colour on link buttons |
| Link text hover color | Text label colour on hover |
| Link border color | Border colour on link buttons |
| Link border hover color | Border colour on hover |
| Link corner radius | Rounded corners on link buttons (0–32px) |
| Social icon color | Colour of social icon glyphs |
| Social icon hover color | Colour on hover |
Card group#
These fields control the outer wrapper card that contains the entire bio page.
| Field | What it controls |
|---|---|
| Card corner radius | Rounded corners on the outer card (0–48px) |
| Card border color | Border colour around the outer card |
| Card border width | Border thickness in pixels (0–8px) |
Advanced group#
| Field | What it controls |
|---|---|
| Card shadow | Drop shadow depth on the outer card (None / Soft / Medium / Strong) |
| Link hover shadow | Shadow appears on link buttons when hovered |
| Link border width | Border thickness on link buttons (0–6px) |
| Background image URL | A full-page background image behind the card |
| Photo-card band color | The overlay band colour on Enhanced Link (card) titles |
| Photo-card title color | The text colour for Enhanced Link (card) titles |
Player colors group#
These fields theme the Vidstack player chrome when Vidstack links are on the bio page.
| Field | What it controls |
|---|---|
| Player accent | Colour of the play button, scrubber bar, and progress fill |
| Player chrome background | Background of the control bar area |
| Player icon color | Colour of player control icons |
| Player time / title text color | Colour of the time code and track title text |
| Player corner radius | Rounded corners on the player wrapper (0–48px) |
Starting from a preset#
The easiest approach is to select a preset first, then switch to Custom. The Custom theme initialises with the token values from whichever preset was active — giving you a working design to refine rather than starting from a blank slate.
Resetting to Auto#
Any field can be cleared back to Auto — it will revert to the preset’s default for that token. This is useful if you have overridden something and want to restore the original preset value without resetting the entire custom theme.