#Theming

The player is styled with CSS custom properties on its root element (.vp-root). You can set them with the theme option, from your own CSS, or live from JavaScript. The stylesheet is injected once into <head> as <style id="vp-styles"> when the first player is created.

#Theme variables

Naming rule: camelCase becomes kebab-case and numbers are split off, so color1 becomes --vp-color-1 and toolbarBg becomes --vp-toolbar-bg.

Because the tints are derived from color2 and color3 with color-mix(), you only need to change those two to invert the palette.

In players narrower than 480 px, a container query sets --vp-icon-size: 20px and --vp-font-size: 13px on .vp-ui. Those values win over values set on the root. If you need fixed sizes, set them on .vp-ui too.

#The theme option

createPlayer({
  container: 'player',
  source: 'https://example.com/video.mp4',
  theme: { color1: '#facc15', color3: 'rgba(30, 27, 75, 0.95)', radius: '12px' },
});

The values are written as inline custom properties on player.root.

#From CSS

#player .vp-root {
  --vp-color-1: #e11d48;
  --vp-toolbar-bg: #18181b;
  --vp-radius: 2px;
}

Use a selector more specific than .vp-root (e.g. scope it by the container). The player's <style> is appended to the end of <head> at runtime, usually after your stylesheets, so a plain .vp-root { … } rule in your CSS would lose the tie.

#Live theming

player.root.style.setProperty('--vp-color-1', '#22c55e');
player.root.style.removeProperty('--vp-color-1'); // back to the default

The demo's theme builder works this way. See the live demo and demo/customization.ts.

#Light theme

createPlayer({
  container: 'player',
  source: 'https://example.com/video.mp4',
  theme: {
    color1: '#2563eb',
    color2: '#18181b', // dark foreground
    color3: 'rgba(255, 255, 255, 0.96)', // light surfaces
    toolbarBg: 'linear-gradient(to top, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0))',
    subColor: '#18181b',
    subBg: 'rgba(255, 255, 255, 0.85)',
  },
});

#CSS class hooks

All classes are prefixed with vp-. Useful hooks:

Add your own classes to any layout node with className.

/* thicker markers, rounded big play button */
#player .vp-timeline-marker { width: 4px; }
#player .vp-big-play { border-radius: 16px; }

#Icons

Replace built-in icons with the icons option. The values are SVG markup strings:

createPlayer({
  container: 'player',
  source: 'https://example.com/video.mp4',
  icons: {
    play: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M7 4v16l13-8z"/></svg>',
    settings: '<svg viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="4"/></svg>',
  },
});

Icon names (IconName): play, pause, replay, volume-high, volume-low, volume-mute, fullscreen, fullscreen-exit, settings, playlist, prev, next, check, back. The built-in set is exported as defaultIcons.

• Use fill="currentColor" (or stroke="currentColor") so icons follow color2.
• The markup is parsed as SVG (never as HTML) and sanitized. Only SVG shape and paint elements are kept (svg, g, path, circle, rect, line, polyline, polygon, ellipse, defs, gradients, stop, clipPath, mask, symbol, title, desc). Event handler attributes, href, javascript: values, and url() in style are removed. Invalid markup renders an empty icon.
• Icons for your own buttons: see iconEl() and createIconButton() in Plugins.

#UI text and languages

lang selects the built-in dictionary: 'en' (default) or 'ru'. i18n overrides individual keys:

createPlayer({
  container: 'player',
  source: 'https://example.com/video.mp4',
  lang: 'en',
  i18n: { quality: 'Resolution', 'error.network': 'Check your connection and try again' },
});

German, or any other language, is a full i18n override:

const de = { play: 'Abspielen', pause: 'Pause', mute: 'Stumm', unmute: 'Ton an', settings: 'Einstellungen', quality: 'Qualität', speed: 'Geschwindigkeit', subtitles: 'Untertitel', off: 'Aus', normal: 'Normal' /* … */ };
createPlayer({ container: 'player', source: 'https://example.com/video.mp4', i18n: de });

Unknown keys fall back to the key itself. Layout hint and text values, plugin menu labels, and ctx.t() calls all go through the same lookup, so you can localize custom UI by adding your own keys to i18n:

// layout: { type: 'text', text: 'skipIntro', action: 'api:seek,90', className: 'vp-button' }
createPlayer({ container: 'player', source: '…', layout, i18n: { skipIntro: 'Skip intro' } });

The dictionaries are exported as dictionaries. The PlayerJS-compatible new Playerjs({...}) always uses Russian (see PlayerJS compatibility).