Theming
Light, dark, and system
The toaster ships with two themes; system tracks prefers-color-scheme.
<sonner-toaster theme="system"></sonner-toaster>CSS custom properties
Every color and dimension is a CSS custom property on the toaster. Override any of them in your own stylesheet:
sonner-toaster {
--normal-bg: #1a1a1a;
--normal-border: #2a2a2a;
--normal-text: #fafafa;
--border-radius: 12px;
--width: 400px;
}| Variable | Default (light) | Purpose |
|---|---|---|
--width | 356px | Toast width. |
--gap | 14px | Vertical spacing in the expanded stack. |
--border-radius | 8px | Toast corner radius. |
--normal-bg | #fff | Default toast background. |
--normal-border | var(--gray4) | Default border. |
--normal-text | var(--gray12) | Default text color. |
--success-bg / -border / -text | green triple | Success rich-color palette. |
--info-bg / -border / -text | blue triple | Info palette. |
--warning-bg / -border / -text | amber triple | Warning palette. |
--error-bg / -border / -text | red triple | Error palette. |
--offset-top/right/bottom/left | 24px | Distance from viewport edges. |
Rich colors
Add the rich-colors attribute to color-code success / info / warning / error toasts:
<sonner-toaster rich-colors></sonner-toaster>Live theme preview
Drag any control below; the toaster on this page picks up the change immediately. Click Show toast to verify.