If you are building a fitness app, a theme switcher is easy until it reaches the exercise media.
Cards, buttons, progress bars, and typography can all follow design tokens. Then an exercise animation arrives with a white background. Dark mode gets a white square. A brand gradient makes the figure look pasted on. A second white-label customer needs another export of the same movement.
That is not a CSS problem. It is an asset problem.
The short version
Use transparent exercise media as the theme-independent master:
- dark mode, light mode, gradients, and brand colours can all use the same file;
- white-label apps do not need a separate animation export for every client palette;
- stills belong in lists and cards, while motion loads on an exercise detail screen;
- an MP4 can be generated later when a fixed-background player needs play/pause/seek.
The important separation is simple: the asset owns the exercise, and the app owns the surface behind it.
Why a white background breaks a theme
An image with a flattened white background contains white pixels. The browser cannot tell whether a pixel is part of the figure, a highlight, a white piece of equipment, or the old background.
Changing the CSS behind that image does not remove those pixels. filter, opacity, and mix-blend-mode can hide the problem in one composition, but they cannot reliably reconstruct the figure's edges. The result is usually a white panel, a halo, or an exercise whose own highlights have been altered.
The common fallback is to put every exercise inside a white card. That is fine if white is the permanent product surface. It becomes technical debt as soon as the app adds dark mode, coach themes, seasonal palettes, gradients, or a white-label customer.
One animation, many surfaces
The transparent version lets the UI choose the surface at render time:
<div class="exercise-media">
<img
src="/animations/mountain-climbers.webp"
width="960"
height="960"
alt="Mountain Climbers"
>
</div>
.exercise-media {
background: var(--surface);
border-radius: 1rem;
overflow: hidden;
}
--surface can be a dark colour, a cream card, a brand gradient, or a customer-specific theme token. The animation does not change, and no image editor is involved.
The movement stays the same while the app skin changes around it: navigation, cards, metrics, accents, and the surface can all belong to the product or white-label customer.
The MP4 is not wrong when the background is intentionally fixed. It is wrong as the only source asset, because the next surface change requires a new render. Keep the transparent master; create a baked-background derivative when the screen actually benefits from video controls or smaller delivery.
What to ship on each screen
| Screen | Delivery | Reason |
|---|---|---|
| Exercise search and library | Transparent still WebP | Small and easy to scan |
| Workout cards | Transparent poster | Keeps a grid light while following the theme |
| Exercise detail | Transparent animated WebP on demand | The user is studying the movement |
| Fixed branded player | MP4 derived from the chosen surface | Proper play/pause/seek and smaller bytes |
Do not autoplay a full catalogue just because the files are animated. A 960px motion asset is much heavier than a poster, and many simultaneous clips compete for decode time. The useful default is still-first, one active animation, and explicit playback when someone opens or selects an exercise.
The product payoff
Transparent exercise media is more than a format choice. It makes these product features cheaper to maintain:
- Dark mode without a second image library.
- Custom brand palettes without re-rendering hundreds of movements.
- White-label apps that share one content source.
- Gradient and photo surfaces without visible rectangles.
- Rounded or circular containers without a square background.
- Future redesigns where the source asset survives the next visual system.
That is why I would treat transparency as part of the product architecture. If changing the theme requires opening an image editor, the media pipeline has coupled itself to the UI.
Where RepDB fits
RepDB's Standard bundle ships classic exercise images with transparent backgrounds and looping transparent WebP animations. The same source can be placed on the surface your app chooses, or converted into a fixed-background MP4 for a particular player.
The full article has the interactive surface demo, implementation checklist, and FAQ. You can also inspect the free preview and compare the commercial tiers.
I build and sell RepDB, so this is a disclosed product recommendation. The useful test is to take one real movement, put it on a dark card and a brand gradient, and see whether the asset or the UI gets to own the background.
