Themes

The RVE SDK has a theme system for the full editor UI. A theme sets the colors of the panels, backgrounds, borders, timeline items, and controls. You change a theme with CSS variables. You do not change the SDK components.

Built-in Themes

The SDK has three built-in themes:

Light

Theme id: light

Dark

Theme id: dark (default)

RVE

Theme id: rve

The editor starts with the dark theme. Use the defaultTheme prop to start with a different theme.

How Theming Works

The theme system has these parts:

1. The SDK stylesheet (@reactvideoeditor/react-video-editor/styles.css) defines a set of --rve-* CSS variables for each built-in theme.
2. The editor root element has a data-rve attribute. The SDK sets a data-rve-theme attribute with the active theme id on this element.
3. Each theme is a CSS rule that matches [data-rve][data-rve-theme='<id>']. The rule sets the values of the --rve-* variables.
4. All editor components read their colors from the --rve-* variables.

/* The SDK stylesheet contains rules like this one. */
[data-rve][data-rve-theme='dark'] {
  --rve-background: var(--rve-base-950);
  --rve-foreground: var(--rve-base-200);
  --rve-primary: var(--rve-primary-600);
  --rve-border: var(--rve-base-800);
}

The theme attribute is on the editor root only. The SDK does not add a class or an attribute to the <html> element. Thus, the editor theme does not change the rest of your page.

When the user selects a theme in the theme dropdown, the SDK changes the data-rve-theme value. The CSS variables change immediately. The SDK also keeps the selection in localStorage (key rve-extended-theme). On the next load, a valid saved theme replaces defaultTheme.

Tailwind Classes in Your App

The SDK compiles its Tailwind classes with the rve prefix (for example, rve:bg-primary). This prevents conflicts with the Tailwind classes of your app.

Thus, a class such as bg-primary in your app does not use the RVE theme. It uses the theme of your app. If a component of your app must use an RVE color, read the variable directly:

<div style={{ background: 'var(--rve-primary)', color: 'var(--rve-primary-foreground)' }} />

The --rve-* variables have values only inside the editor root element ([data-rve]). Use them only in components that you put inside the editor, for example a customSidebar or a sidebarLogo.

Override Theme Variables

To change a built-in theme or to add a new theme, do these steps:

1. Create a CSS file in your app.
2. Write a rule for the theme id. Use the selector [data-rve][data-rve-theme='<id>'].
3. Import your CSS file after the SDK stylesheet.

/* Change the primary color of the built-in dark theme. */
[data-rve][data-rve-theme='dark'] {
  --rve-primary: hsl(156 80% 40%);
  --rve-ring: hsl(156 80% 40%);
  --rve-sidebar-primary: hsl(156 80% 40%);
}

import '@reactvideoeditor/react-video-editor/styles.css';
import './rve-overrides.css';

To add a new theme with its own id, see Whitelabelling.

Theme Variable Reference

All variables use the --rve- prefix. Most color variables have a -foreground pair for the text and icons on that color.

Color scales

Core UI colors

Sidebar

Text, surfaces, and states

Floating toolbar

The floating toolbar is the selection toolbar and the canvas zoom controls.

Timeline items

Timeline

Corner radius

Summary

• Themes are sets of --rve-* CSS variables.
• The SDK sets data-rve-theme on the editor root element, not on <html>.
• To change a theme, import your own CSS file after the SDK stylesheet.
• Use the selector [data-rve][data-rve-theme='<id>'].
• The SDK Tailwind classes have the rve prefix, so the Tailwind classes of your app do not change.