Sopplayerv2.0
Sopplayer/Docs/Theming
Documentation

Theming

Customize Sopplayer with eight built-in skins or create a custom CSS-token theme.

Eight built-in themes

Use default, flamingo, forest, city, sea, fantasy, minimal or duolingo.

Duolingo

Playful green/yellow accents and tactile rounded controls.

Obsidian

Dark glass flagship theme.

Forest

Emerald and sage nature palette.

Minimal

High-contrast monochrome style.

Switch at runtime

const player = new Sopplayer('#player', {
  theme: 'duolingo'
});

player.setTheme('forest');

Custom tokens

.sp-player.sp-theme-custom {
  --sp-color-primary: #58cc02;
  --sp-color-primary-hover: #46ad00;
  --sp-color-primary-glow: rgba(88, 204, 2, .4);
  --sp-radius-md: 14px;
}