Theming & Colours
Make the player look like your station. AutoPod gives you control over colours, theme mode, and image display — so your listen-again experience matches your brand.
The colour system
The player uses three colour settings that work together:
| Setting | What it colours | Example use |
|---|---|---|
| Brand Colour | Station badge, branding elements | Your station's primary brand colour |
| Accent Colour | Play button, scrubber, links, active states | A complementary or contrasting colour |
| Background Tint | Gradient behind the album artwork | A darker shade that doesn't compete with artwork |
Colour cascade
Each colour falls back to the next if not set:
- Accent Colour → falls back to Brand Colour → falls back to Stream Colour
- Brand Colour → falls back to Stream Colour
- Background Tint → falls back to Brand Colour → falls back to Stream Colour
This means if you only set one colour (Brand Colour), it's used for everything. As you add more colours, you get finer control.
Set your Brand Colour to your station's primary colour. That's enough to get a good look. Then fine-tune the Accent and Tint colours if you want more control.
Setting colours
- Go to Player Settings in the dashboard sidebar
- Under the Appearance section, you'll see colour pickers for each setting
- Click a colour picker or enter a hex code (e.g.,
#d4940a) - Save your changes
Changes take effect on the player within a few minutes.
Theme mode
The player supports three theme modes:
| Mode | Behaviour |
|---|---|
| System (default) | Matches the listener's device preference — if their phone is in dark mode, the player is dark |
| Dark | Always dark background, light text |
| Light | Always light background, dark text |
Most stations look best in System mode, which respects the listener's preference. If your branding works better on a specific background, you can force dark or light.
Image display style
Controls how episode and show artwork is displayed:
| Style | Appearance |
|---|---|
| Bordered | Artwork is padded with rounded corners, floating above the background. Clean and modern. |
| Full Bleed | Artwork extends edge-to-edge. More immersive, works well with strong imagery. |
Choosing good colours
For dark mode
- Brand Colour: Use your station's primary colour at full saturation — it'll pop against the dark background
- Accent Colour: A bright, contrasting colour works well for interactive elements
- Background Tint: A very dark shade (near-black with a hint of your brand colour) creates depth without overwhelming the artwork
For light mode
- Brand Colour: Your primary colour — should be readable against white
- Accent Colour: A medium-to-dark shade that's clearly visible against light backgrounds
- Background Tint: A very light shade or pastel version of your brand colour
Contrast tips
- The play button and scrubber use the accent colour — make sure it's clearly visible against both dark and light backgrounds (if using System mode)
- Text is always white (dark mode) or dark grey (light mode) — your colours don't need to be readable as text
- The background tint is displayed as a gradient, so it's automatically softened
Examples
Community radio station
- Brand: station green
#22c55e - Accent: same green (no override needed)
- Tint: dark green
#0a2d14 - Theme: System
Student radio station
- Brand: university purple
#7c3aed - Accent: vibrant pink
#ec4899 - Tint: deep purple
#1a0a33 - Theme: Dark (matches the late-night vibe)
Commercial station
- Brand: corporate blue
#2563eb - Accent: energetic orange
#f97316 - Tint: navy
#0a1628 - Theme: System
Preview your changes
After saving colour changes in the dashboard, open your player in a new tab to see the result. If you have a custom domain set up, check it there too — the colours are consistent across all player URLs.
Colour changes may take a few minutes to appear on the live player due to caching. Hard-refresh the player (Ctrl+Shift+R / Cmd+Shift+R) to see changes immediately.