CSS variables & parts

Custom properties

Set them on vega-player (or a class of players). The matching attribute, if present, wins.

Property	Default	Used for
`--color-primary`	`#aaa`	Progress, volume, active items, spinner, retry button.
`--color-controls`	`rgba(0,0,0,0.7)`	Control bar and menus.
`--color-overlay`	`rgba(0,0,0,0.95)`	Modal background.
`--play-btn-color`	`rgba(255,255,255,0.9)`	Centre play button.
`--cta-bg-color`	`--color-primary`	Modal button background.
`--cta-text-color`	`#000`	Modal button text.
`--cta-hover-bg-color`	`#fff`	Modal button background on hover.
`--cta-hover-text-color`	`#000`	Modal button text on hover.
`--modal-description-color`	`rgba(255,255,255,0.7)`	Modal description.

1
vega-player {
2
  --color-primary: #ff6a2b;
3
  --color-controls: rgba(11, 7, 5, 0.82);
4
}
5

6
.dark-section vega-player {
7
  --color-primary: #ffb547;
8
}

Parts

Style internal elements with ::part(name).

Part	Element
`player`	The whole player box.
`video`	The `<video>` element.
`play-button`	The large centre play button.
`controls`	The control bar.
`progress`	The progress bar (slider).
`time`	The time display.
`volume`	The volume control (button + slider).
`preview`	The seek preview bubble (time + thumbnail).
`modal`	The modal overlay.
`modal-content`	The modal box.
`cta`	The modal button.
`error`	The error screen.
`spinner`	The loading spinner.
`captions`	The captions box (above the control bar).

1
vega-player::part(play-button) { box-shadow: 0 0 0 10px rgba(255, 181, 71, 0.16); }
2
vega-player::part(cta) { border-radius: 999px; text-transform: none; }
3
vega-player::part(preview) { font-family: 'JetBrains Mono', monospace; }
4
vega-player::part(video) { object-fit: contain; }
5
vega-player::part(captions) { font-family: Georgia, serif; }