Sopplayer Theme Showcase

Creating Your Own Theme

You can theme Sopplayer effortlessly by simply customizing CSS variables in your stylesheet:

/* Example Custom Theme */
.sp-player.sp-theme-custom {
  --sp-color-primary: #8b5cf6;            /* Violet scrubber & active states */
  --sp-color-primary-glow: rgba(139, 92, 246, 0.4);
  --sp-color-bg: rgba(15, 10, 30, 0.9);   /* Dark purple glass */
  --sp-radius-md: 16px;                   /* Extra-rounded corners */
}