Colors

sv11-ui components are styled entirely with semantic color tokens — the same shadcn-svelte theming layer — rather than hard-coded colors. Each token is a CSS variable exposed as a Tailwind color (e.g. --primary → bg-primary, text-primary), so components adapt automatically to light/dark mode and any custom theme.

Click a swatch to copy its Tailwind class.

Using tokens

Reference tokens through Tailwind utilities:

<div class="bg-card text-card-foreground border-border rounded-lg border">
	<button class="bg-primary text-primary-foreground">Action</button>
</div>

Or directly as CSS variables:

.custom {
	background-color: var(--muted);
	color: var(--muted-foreground);
}

Customizing

Override any token in your global stylesheet to retheme every component at once. See Theming for the full setup and Dark Mode for light/dark switching.

:root {
	--primary: oklch(0.55 0.22 264);
	--primary-foreground: oklch(0.98 0 0);
}