Themed controls
Set the accent color and player tokens with accentColor and design tokens.
The player's look comes from design tokens shipped in
@moviie/player-react/styles.css. Import the stylesheet once (see
Installation) and the chrome
picks them up.
Accent color per component
The accent color is the Vidstack --media-brand custom property. By default
it resolves to the embed's branding color; override it per component with the
accentColor prop:
<MoviieVideo {...moviie} accentColor="brand" aspectRatio={16 / 9} />Prefer tokens over literals
Use the exposed design tokens and the accentColor prop instead of hard-coded
color values. Tokens keep the player consistent with the Moviie design language
and survive theme updates.
Theme a wrapper or the whole app with CSS
Set --media-brand (and other player tokens) through your own CSS to theme a
wrapper or the entire app:
.my-player {
--media-brand: #6d28d9;
}<div className="my-player">
<MoviieVideo {...moviie} aspectRatio={16 / 9} />
</div>Toggle which controls show
Theming is separate from which controls render. Use the controls prop to
toggle individual affordances on top of the embed's dashboard configuration:
<MoviieVideo
{...moviie}
aspectRatio={16 / 9}
accentColor="brand"
controls={{ showChapters: false, showSpeed: false }}
/>See Configuration for the full theming and control-override rules.