# Theming

> audiocn-svelte 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-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:

| 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:

```css filename="src/routes/layout.css"
: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:

```svelte
<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:

```svelte
<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](/docs/components/level-meter#build-your-own-visual).