Editor theming

Pick a built-in theme with the theme prop, then override any CSS variable inline or from your own stylesheet — the editor reads from its own custom element scope so overrides don't bleed.

Built-in themes

The editor ships four themes: Light, Grey, Dark, and Night. Open any of them live in the Playground.

• Light theme preview
• Grey theme preview
• Dark theme preview
• Night theme preview

<VideoEditor theme="light" />
<VideoEditor theme="grey" />
<VideoEditor theme="dark" />
<VideoEditor theme="night" />

Brand overrides

<VideoEditor
  theme="night"
  style={{
    '--vf-primary':       '#a855f7',
    '--vf-primary-hover': '#9333ea',
    '--vf-accent':        '#ec4899',
  }}
/>

Every variable

Variable	Role
--vf-bg	Root background.
--vf-panel	Panel surface (sidebar, timeline).
--vf-panel-2	Elevated surface.
--vf-border	Default border.
--vf-text	Primary text.
--vf-text-muted	Secondary text.
--vf-primary	Brand colour (buttons, selection).
--vf-primary-hover	Brand hover.
--vf-accent	Secondary brand.
--vf-success / --vf-warning / --vf-danger	Status colours.
--vf-titlebar-height	Default 48px.
--vf-sidebar-width	Default 400px.
--vf-timeline-height	Default 260px.
--vf-radius	Default radius.
--vf-font-family	Default system-ui.

NOTE

Scoped. The editor's styles are scoped to its custom-element shell, so overrides you make inline never leak out.