Design System

All visual properties are controlled by CSS custom properties (--vtk-*). Override them globally in :root, scoped to a container, or pass a ToastDesignTokens object as the theme prop.

Built-in themes

<!-- Light (default) -->
<ToastContainer theme="light" />

<!-- Dark -->
<ToastContainer theme="dark" />

<!-- Follows prefers-color-scheme -->
<ToastContainer theme="system" />

Inline token overrides

Pass a ToastDesignTokens object to override specific tokens without touching global CSS:

<ToastContainer
  :theme="{
    colorBg: '#1a1a2e',
    colorText: '#e2e8f0',
    colorSuccess: '#00ff88',
    colorError: '#ff4d6d',
    borderRadius: '16px',
    shadow: '0 8px 32px rgba(0, 0, 0, 0.5)',
    maxWidth: '360px',
  }"
/>

Full token reference

Token	CSS Variable	Default (light)	Description
colorBg	--vtk-color-bg	#ffffff	Toast background
colorText	--vtk-color-text	#1a1a1a	Primary text color
colorBorder	--vtk-color-border	rgba(0,0,0,0.08)	Border color
colorSuccess	--vtk-color-success	#16a34a	Success accent
colorError	--vtk-color-error	#dc2626	Error accent
colorWarning	--vtk-color-warning	#d97706	Warning accent
colorInfo	--vtk-color-info	#2563eb	Info accent
colorLoading	--vtk-color-loading	#7c3aed	Loading accent
fontFamily	--vtk-font-family	system-ui	Font stack
fontSize	--vtk-font-size	0.875rem	Base font size
fontWeight	--vtk-font-weight	400	Base font weight
lineHeight	--vtk-line-height	1.4	Line height
borderRadius	--vtk-border-radius	10px	Corner radius
borderWidth	--vtk-border-width	1px	Border width
shadow	--vtk-shadow	multi-layer	Box shadow
paddingX	--vtk-padding-x	1rem	Horizontal padding
paddingY	--vtk-padding-y	0.75rem	Vertical padding
iconSize	--vtk-icon-size	1.25rem	Icon size
progressHeight	--vtk-progress-height	3px	Progress bar height
maxWidth	--vtk-max-width	400px	Maximum toast width
minWidth	--vtk-min-width	280px	Minimum toast width
transitionDuration	--vtk-transition-duration	300ms	Animation duration
transitionEasing	--vtk-transition-easing	ease	Animation easing
zIndex	--vtk-z-index	9999	Container z-index

Global CSS override

/* styles/toasts.css */
:root {
  --vtk-border-radius: 6px;
  --vtk-font-family: 'Inter', sans-serif;
  --vtk-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  --vtk-max-width: 360px;
}