Player — Theming & Customization

Preset Themes

Both the Player and StreamCrafter ship with built-in theme presets. Apply with a single prop:

// React
<Player contentId="a1b2c3d4e5f6g7h8" contentType="live" options={{ theme: "dracula" }} />
<StreamCrafter whipUrl="..." theme="tokyo-night" />

<!-- Web Components -->
<fw-player content-id="a1b2c3d4e5f6g7h8" theme="nord"></fw-player>
<fw-streamcrafter whip-url="..." theme="catppuccin"></fw-streamcrafter>

// Vanilla
const player = createPlayer({ ..., theme: "rose-pine" });
const studio = createStreamCrafter({ ..., theme: "gruvbox" });

Available Themes

Theme	Mode	Accent
default	Dark	Blue
light	Light	Blue
neutral-dark	Dark	Blue
tokyo-night	Dark	Blue
tokyo-night-light	Light	Blue
dracula	Dark	Purple
nord	Dark	Frost blue
catppuccin	Dark	Mauve
catppuccin-light	Light	Mauve
gruvbox	Dark	Yellow
gruvbox-light	Light	Yellow
one-dark	Dark	Blue
github-dark	Dark	Blue
rose-pine	Dark	Iris (purple)
solarized	Dark	Cyan
solarized-light	Light	Cyan
ayu-mirage	Dark	Orange

Runtime Theme Switching

// Vanilla player
player.theme = "tokyo-night";

// Vanilla studio
studio.theme = "catppuccin";

Design Tokens (CSS Custom Properties)

Color tokens use bare HSL triplets. Consume via hsl(var(--fw-*) / <alpha>) for opacity support. --fw-radius is a CSS length (for example 8px).

Player Tokens (--fw-*)

Colors

Token	Purpose
--fw-accent	Primary interactive color
--fw-accent-secondary	Secondary accent
--fw-success	Success indicators
--fw-danger	Error and destructive actions
--fw-warning	Warning indicators
--fw-info	Informational indicators
--fw-live	Live badge and pulse
--fw-on-accent	Text/icons on accent fills
--fw-on-live	Text/icons on live fills

Surfaces

Token	Purpose
--fw-surface	Default background
--fw-surface-deep	Deepest background layer
--fw-surface-raised	Elevated elements (controls, menus)
--fw-surface-active	Active/pressed state

Text

Token	Purpose
--fw-text	Primary text
--fw-text-bright	High-emphasis text
--fw-text-muted	Secondary text
--fw-text-faint	Disabled and hint text

Layout

Token	Purpose
--fw-shadow-color	Shadow HSL base
--fw-radius	Border radius (CSS length, default 0)

Studio Tokens (--fw-sc-*)

Token	Purpose
--fw-sc-surface-deep	Deepest background
--fw-sc-surface	Panel surfaces
--fw-sc-surface-raised	Elevated surfaces
--fw-sc-surface-active	Active/pressed state
--fw-sc-border	Border color
--fw-sc-text	Primary text
--fw-sc-text-bright	High-emphasis text
--fw-sc-text-muted	Secondary text
--fw-sc-text-faint	Disabled and hint text
--fw-sc-accent	Interactive elements
--fw-sc-accent-secondary	Secondary accent
--fw-sc-success	Success indicators
--fw-sc-danger	Error/destructive actions
--fw-sc-warning	Warning indicators
--fw-sc-info	Informational indicators
--fw-sc-live	Live indicator

Custom Overrides

CSS (global, React/Svelte/vanilla)

/* Player: load after player.css */
.fw-player-root {
  --fw-accent: 280 70% 60%;
  --fw-surface: 0 0% 10%;
}

/* Studio */
.fw-sc-root {
  --fw-sc-accent: 262 80% 60%;
  --fw-sc-surface-deep: 230 15% 12%;
}

Page CSS cannot theme the web components this way. <fw-player> and <fw-streamcrafter> redeclare every token on their root element inside the shadow root, so custom properties set on the host element have no effect. Use the theme attribute (both elements) or the themeOverrides property (<fw-player>) instead.

JavaScript (per-instance)

// Player
player.setThemeOverrides({
  accent: "262 80% 60%",
  surface: "230 15% 12%",
  radius: "12px",
});
player.clearTheme(); // Reset to preset

// Studio
studio.theme = {
  accent: "262 80% 60%",
  surfaceDeep: "230 15% 12%",
};

Internationalization

Five built-in locale packs: en, es, fr, de, nl.

Player i18n

// React
<Player
  contentId="a1b2c3d4e5f6g7h8"
  contentType="live"
  options={{
    locale: "de",
    translations: {
      play: "Starten",
      pause: "Pausieren",
    },
  }}
/>

// Vanilla
import { getLocalePack } from "@livepeer-frameworks/player-core";
import { createPlayer } from "@livepeer-frameworks/player-core/vanilla";

const player = createPlayer({
  ...,
  locale: "de",
  translations: {
    play: "Starten",
    pause: "Pausieren",
  },
});

// Or fetch specific translation strings
const deTranslations = getLocalePack("de");

<!-- Svelte -->
<Player
  contentId="a1b2c3d4e5f6g7h8"
  contentType="live"
  options={{
    locale: "de",
    translations: {
      play: "Starten",
      pause: "Pausieren",
    },
  }}
/>

// Web component
const player = document.querySelector("fw-player");
player.locale = "de";
player.translations = {
  play: "Starten",
  pause: "Pausieren",
};

Translation overrides are layered over the selected locale pack, so you only need to provide the strings you want to rename for your product.

Studio i18n

// React
<StreamCrafter whipUrl="..." locale="es" />;

// Vanilla
const studio = createStreamCrafter({
  whipUrl: "...",
  locale: "de",
  translations: {
    goLive: "Live gehen",
    stopStreaming: "Stoppen",
  },
});

Configurable Hotkeys

Player Hotkeys

Default player shortcuts:

Shortcut	Action
Space / K	Play/Pause
J / ArrowLeft	Skip back 10s
L / ArrowRight	Skip forward 10s
ArrowUp / ArrowDown	Volume +/- 10%
M	Mute/Unmute
F	Fullscreen
C	Captions
0-9	Seek to 0-90%
, / .	Prev/Next frame (paused)

Mouse / Touch:

Gesture	Action
Double-click	Fullscreen toggle
Double-tap (left/right)	Skip +/- 10s
Click & Hold	2x speed

Live Constraints

Live-only streams disable seeking, skip, 2x hold, and frame-step. Live with DVR buffer enables these features.

Custom player hotkeys

Custom player key maps are present in the core types, but they are not wired through the current player facades. Treat the shortcuts above as fixed defaults for now.

Studio Hotkeys

const studio = createStreamCrafter({
  whipUrl: "...",
  keyMap: {
    toggleStream: ["g"],
    toggleMute: ["m"],
    addCamera: ["c"],
    shareScreen: ["s"],
    toggleSettings: [","],
  },
});