A theme sets the toast’s colors, corners, surface and font. Pick a built-in one, lay your own over it, or style a single toast.
The theme prop
<Toaster theme="system" /> // light, dark, or system
<Toaster theme={{ fill: '#155dfc' }} /> // overrides on the default
<Toaster
theme={{ // overrides per scheme
light: { fill: '#155dfc' },
dark: { fill: '#1f56aa' },
}}
/>
The names describe the app, as on the web: light gives a dark toast that stands off a light app, and dark gives a light one. Without a theme, toasts are white.
Tokens
The surface of a solid toast.
Description text on a solid toast.
Title color. Unset, the title takes the state color.
stateColors
Record<SileoState, string>
One color per state, for the badge, title and buttons.
tones
{ badge, button, buttonPressed }
How opaque the state color is behind the badge and buttons.
appearance
'solid' | 'glass'
= 'solid'
The surface.
glass
{ style, tint, colorScheme, description }
Liquid Glass settings.
Build a theme in code with createTheme(overrides, base). The built-ins are exported as defaultTheme, themes.light and themes.dark.
One toast
sileo.action({
title: 'New Sale',
fill: '#000000',
styles: {
title: { color: '#ffffff' },
description: { color: 'rgba(255, 255, 255, 0.75)' },
badge: { backgroundColor: 'rgba(255, 255, 255, 0.2)' },
button: { backgroundColor: 'rgba(255, 255, 255, 0.1)' },
buttonText: { color: '#ffffff' },
},
});
Custom content
Nothing inherits a color on native, so a custom description reads the toast’s colors from useSileoTheme():
function Paid() {
const { tone, text } = useSileoTheme();
return (
<Text style={{ color: text }}>
Received <Text style={{ color: tone }}>$49.00</Text>
</Text>
);
}
sileo.success({ title: 'Payment received', description: <Paid /> });
It returns the resolved theme plus the toast’s state, tone, fill, the appearance actually drawn, and the description color for it as text.