Styling

The theme prop

theme sets colors, corners, and fonts. Translucent controls follow these colors automatically.

<SeamPlayer
  src="/film.mp4"
  theme={{
    accent: "#e0115f",
    accentText: "#ffffff",
    radius: "16px",
    font: "system-ui, sans-serif",
    monoFont: "ui-monospace, monospace",
  }}
/>

accent

Play button, fills, and active choices. Default #e0115f.

accentText

Text and icons on the accent. Default #ffffff.

background

Player background. Default #15121a.

surface

Control surfaces. Default #15121a.

text

Text and icons. Default #ffffff.

highlight

Highlighted moments. Default #ffd23f.

highlightText

Text on highlights. Default #1a0b14.

radius

Corner radius of the player. Default 16px.

font

Interface font. Inherits the page font by default.

monoFont

Times and sizes. A monospace stack by default.

CSS variables

Every color, the radius, and the easing are CSS variables on .sp, so you can also set them in your own stylesheet, for example per color scheme.

.sp {
  --sp-accent: #2f6bff;
  --sp-highlight: #fff3b0;
  --sp-radius: 0;
  --sp-font-mono: "IBM Plex Mono", monospace;
}

--sp-accent

Same as accent

--sp-accent-text

Same as accentText

--sp-bg

Same as background

--sp-surface

Same as surface

--sp-text

Same as text

--sp-highlight

Same as highlight

--sp-highlight-text

Same as highlightText

--sp-radius

Same as radius

--sp-font

Same as font

--sp-font-mono

Same as monoFont

--sp-ease

The easing for most motion

Layout

The player fills its container’s width at 16:9. Use className or style to size and place it.

Try the Pop and Sun accents, corner sizes, and fonts in the playground.