Theming
How the components pick up your theme, and the semantic tokens they add.
Components style themselves with your existing shadcn theme — primary, muted,
destructive, radii, and so on — so they match your app out of the box in light and dark
mode.
Kit tokens
Two small semantic groups are added to your global CSS by the registry (via cssVars) the
first time a component that needs them is installed.
Swatches show the defaults for the current light or dark mode.
| Token | Default |
|---|---|
--active-background Connection actions and status indicators | Green |
--active-foreground Text and icons on active surfaces | Pale green |
--inactive-background Muted mic, camera and screen controls | Red |
--inactive-foreground Text and icons on inactive surfaces | Pale red |
--agent-background Tinted surfaces for the assistant | Violet tint |
--agent-foreground Assistant role labels, text and icons | Violet |
--client-background Tinted surfaces for the user | Blue tint |
--client-foreground User role labels, text and icons | Blue |
Each pair follows the shadcn surface convention — the -background token fills the
element, the -foreground token colors content on top of it. They're plain CSS variables
in :root / .dark — restyle them like any other shadcn token. For example, keep
the media colors and use your theme's primary and muted colors for conversation roles:
:root {
--active-background: oklch(0.696 0.17 162.48);
--active-foreground: oklch(0.979 0.021 166.113);
--inactive-background: oklch(0.702 0.189 22.23);
--inactive-foreground: oklch(0.971 0.013 17.38);
--agent-background: color-mix(
in oklch,
var(--primary) 10%,
var(--background)
);
--agent-foreground: var(--primary);
--client-background: var(--muted);
--client-foreground: var(--muted-foreground);
}Tailwind utilities map onto the pairs the same way bg-primary maps onto --primary:
bg-active and text-active read --active-background, while text-active-foreground
reads --active-foreground (and likewise for inactive). Components use them as
bg-active text-active-foreground or data-[state=inactive]:bg-inactive, so overrides in
your CSS apply everywhere immediately.
Conversation role labels use text-agent-foreground and text-client-foreground.
Their tinted backgrounds are available for custom surfaces: use
bg-agent text-agent-foreground or bg-client text-client-foreground.