Theming
Every color, radius and space is a --sve-* CSS variable. Override them anywhere — no rebuild, no config.
The token model
Components read --sve-* custom properties for every visual value. To theme,
you set those variables — globally on :root or scoped to any element. There
is no config file and no rebuild.
Overriding tokens
Set tokens globally:
:root {
--sve-color-primary: #8b5cf6;
--sve-color-primary-hover: #7c3aed;
--sve-radius-md: 0.5rem;
}…or scope them to a subtree:
<!-- Scope overrides to any subtree -->
<div style="--sve-color-primary: #10b981;">
<Button color="primary">Emerald</Button>
</div> Accent
Try the live accent sandbox on the home page.
Light & dark
ThemeProvider toggles a light/dark class that swaps the token set. One gotcha:
Overlays portal to <body>
Dialog, Dropdown, Tooltip, Popover, Select and Combobox render their content at the end of
<body> — outside your ThemeProvider wrapper. Mirror the theme class onto <body> so
they get the right tokens.
// Overlays portal to <body>. Mirror the theme class onto
// <body> so portaled content gets the right tokens.
$effect(() => {
document.body.classList.toggle('dark', isDark);
document.body.classList.toggle('light', !isDark);
});Token reference
The most-used token families. Each semantic color has hover / active / foreground / surface / border variants.
| Token | Purpose |
|---|---|
--sve-color-primary | Primary accent (+ secondary, success, warning, danger, default) |
--sve-color-*-foreground | Text/icon color on that surface |
--sve-color-*-surface | Subtle background tint (flat/ghost states) |
--sve-radius-md | Corner radius (sm / md / lg / full) |
--sve-space-* | Spacing scale |
--sve-font-family-sans | Base font family (and -mono) |