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.
<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 320px. |
--vf-timeline-height | Default 260px. |
--vf-radius | Default radius. |
--vf-font-family | Default system-ui. |
Scoped. The editor's styles are scoped to its custom-element shell, so overrides you make inline never leak out.