audiocnTheming
audiocn uses your shadcn theme, plus six audio tokens you can change like any other.
Your theme applies
Components use the standard shadcn tokens: background, foreground, muted, primary, border, ring, destructive. Any shadcn theme or preset restyles audiocn 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:
| Token | Default | Used for |
|---|---|---|
--meter-ok | green | Normal level zone |
--meter-warn | amber | Warning zone |
--meter-clip | var(--destructive) | Clip zone and clip light |
--channel-mute | var(--destructive) | Pressed mute toggle |
--channel-solo | amber | Pressed solo toggle |
--channel-monitor | blue | Pressed monitor toggle |
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 className="[--meter-thickness:6px]" />
<LiveWaveform className="[--waveform:var(--primary)]" />
<BarVisualizer className="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 className="data-muted:opacity-60 data-solo:ring-2 data-solo:ring-channel-solo" />
<DbReadout className="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.