CSS Variables

All CSS custom properties are prefixed --py- to avoid conflicts with the host page. They can be set on any py-player element or its ancestor.

Variable Reference

Variable	Default (light)	Description
--py-accent	#378ADD	Accent/highlight color used for active states, progress fill
--py-bg	#ffffff	Primary background color
--py-bg-secondary	#f5f5f4	Secondary background (playlist, toolbar)
--py-bg-hover	#ede9e0	Hover state background
--py-border	rgba(0,0,0,0.08)	Border and separator color
--py-text	#1a1916	Primary text color
--py-text-secondary	#6b6860	Secondary/label text color
--py-text-muted	#a8a59e	Muted/disabled text color
--py-radius	10px	Border radius for the outer container
--py-font	'DM Sans', 'Segoe UI', system-ui, sans-serif	Font family

Theme Preset Values

light

--py-bg: #ffffff;
--py-bg-secondary: #f5f5f4;
--py-bg-hover: #ede9e0;
--py-border: rgba(0,0,0,0.08);
--py-text: #1a1916;
--py-text-secondary: #6b6860;
--py-text-muted: #a8a59e;

dark

--py-bg: #1c1c1e;
--py-bg-secondary: #2c2c2e;
--py-bg-hover: #3a3a3c;
--py-border: rgba(255,255,255,0.08);
--py-text: #f2f2f7;
--py-text-secondary: #aeaeb2;
--py-text-muted: #636366;

midnight

--py-bg: #0d1117;
--py-bg-secondary: #161b22;
--py-bg-hover: #21262d;
--py-border: rgba(255,255,255,0.06);
--py-text: #e6edf3;
--py-text-secondary: #7d8590;
--py-text-muted: #484f58;

nord

--py-bg: #2e3440;
--py-bg-secondary: #3b4252;
--py-bg-hover: #434c5e;
--py-border: rgba(255,255,255,0.08);
--py-text: #eceff4;
--py-text-secondary: #d8dee9;
--py-text-muted: #4c566a;
--py-accent: #88c0d0;

sunset

--py-bg: #fff8f0;
--py-bg-secondary: #fef3e2;
--py-bg-hover: #fde8c8;
--py-border: rgba(180,80,0,0.12);
--py-text: #2d1a0e;
--py-text-secondary: #7a4020;
--py-text-muted: #c08050;
--py-accent: #e07b39;

forest

--py-bg: #f0f7f0;
--py-bg-secondary: #e0ede0;
--py-bg-hover: #c8dcc8;
--py-border: rgba(0,80,0,0.10);
--py-text: #0d1f0d;
--py-text-secondary: #2d5a2d;
--py-text-muted: #6a9a6a;
--py-accent: #3a7a3a;

Overriding Variables

Set variables on the element or any ancestor:

/* On the element */
py-audio {
  --py-accent: #e07b39;
  --py-radius: 16px;
  --py-font: 'Georgia', serif;
}

/* On a specific instance */
#my-player {
  --py-bg: #1a1a2e;
  --py-text: #eaeaea;
  --py-accent: #7c4dff;
}

<!-- Inline style -->
<py-audio style="--py-accent: hotpink; --py-radius: 20px" src="audio.mp3"></py-audio>

Stacking with Presets

Variables override specific values on top of any preset:

<py-audio
  theme="nord"
  accent="#ebcb8b"
  style="--py-radius: 0px; --py-font: 'Courier New', monospace"
></py-audio>