Theming

Your theme applies

Components use the standard shadcn tokens: background, foreground, muted, primary, border, ring, destructive. Any shadcn-svelte theme or preset restyles audiocn-svelte with no extra work.

Audio tokens

Six tokens cover meanings shadcn has no token for. The CLI adds them to your CSS file when you install your first component:

Each accent also has a -foreground token for text: --meter-ok-foreground, --meter-warn-foreground, --meter-clip-foreground, --channel-mute-foreground, --channel-solo-foreground, and --channel-monitor-foreground. In light mode these are darker than the meter accents; in dark mode they follow the accent. This keeps small labels readable without dimming the meters.

They are also Tailwind colours: bg-meter-ok, text-channel-solo-foreground and so on. Change them the same way as any shadcn token:

:root {
	--meter-ok: oklch(0.72 0.12 200);
}
.dark {
	--meter-ok: oklch(0.78 0.12 200);
}

Component variables

Geometry and drawing colours are CSS variables on each component, so a class can change them:

<LevelMeter class="[--meter-thickness:6px]" />
<LiveWaveform class="[--waveform:var(--primary)]" />
<BarVisualizer class="text-primary [--bar-width:4px]" />

Canvas components read their colours when the theme changes, so switching between light and dark repaints them without a remount.

Data attributes

State is exposed as data attributes, so you can style it with Tailwind:

<ChannelStrip class="data-muted:opacity-60 data-solo:ring-2 data-solo:ring-channel-solo" />
<DbReadout class="data-[zone=clip]:text-meter-clip-foreground" />

Each component page lists its variables and attributes.

Live values in CSS

Meters write their live level to --meter-level (0..1) on every channel, so you can build a visual in CSS alone. See Build your own visual.