Theme system
Style the kit without leaking it into the rest of your app
AvaCloud UI Kit uses a scoped token system. ThemeProvider writes the full token set to a wrapper element, so you can customize palettes, radii, and dark mode behavior without colliding with the host app.
Scope
Tokens and utility classes stay inside the ThemeProvider wrapper.
Override model
Only pass the tokens you want to change; defaults fill in the rest.
Portaled UI
Dialogs, popovers, and similar surfaces mount inside the themed container.
ThemeProvider is required
Every AvaCloud Kit component must render inside ThemeProvider. Without it, the kit cannot resolve its scoped CSS
variables and interactive portaled surfaces will not inherit the right theme context.
Minimal usage
import { ThemeProvider } from '@avalabs/avacloud-kit-ui-preview';
export function App() {
return (
<ThemeProvider>
{/* AvaCloud Kit components go here */}
</ThemeProvider>
);
}Dark mode and token overrides
<ThemeProvider
theme={{
primary: 'oklch(0.6 0.25 270)',
primaryForeground: 'oklch(1 0 0)',
radius: '0.375rem',
}}
>
{children}
</ThemeProvider><ThemeProvider
dark
theme={{
primary: 'oklch(0.72 0.16 248)',
accent: 'oklch(0.24 0.03 255)',
radius: '0.75rem',
}}
>
{children}
</ThemeProvider>ThemeProvider props
Prop
Type
Token families
| Token | Foreground token | Purpose |
|---|---|---|
background | foreground | Page and root background |
card | cardForeground | Card surfaces |
popover | popoverForeground | Popovers, dropdowns, dialogs |
Read resolved theme values in code
import { useTheme } from '@avalabs/avacloud-kit-ui-preview';
function ThemeDebug() {
const { dark, resolvedTheme, portalContainer } = useTheme();
return (
<div>
<p>Mode: {dark ? 'dark' : 'light'}</p>
<p>Primary: {resolvedTheme.primary}</p>
<p>Portal mounted: {portalContainer ? 'yes' : 'no'}</p>
</div>
);
}Tailwind preset for app-level utilities
module.exports = {
presets: [require('@avalabs/avacloud-kit-ui-preview/tailwind.preset')],
};@import '@avalabs/avacloud-kit-ui-preview/styles.css';
@import 'tailwindcss';The Tailwind preset is additive. It exposes namespaced tokens such as bg-avacloud-primary and rounded-avacloud,
but it does not replace the kit stylesheet.
Integration takeaway
Use ThemeProvider for kit internals
This is the required source of truth for tokens, dark mode, and portaled surfaces.
Use the Tailwind preset for app utilities
Add AvaCloud token aliases to your own utilities when you want app-level composition.