Updated October 2026
Dark Mode Integration
Automatic system dark mode detection, class-based toggles, and data attribute synchronization.
Every toastory theme ships with full light and dark token palettes. You can control the mode globally or per notification:
typescript
// 1. Follow system OS preferences automatically ui.configure({ mode: 'auto' });
// 2. Force light mode ui.configure({ mode: 'light' });
// 3. Force dark mode
ui.configure({ mode: 'dark' });
`
Integrating with Tailwind CSS or next-themes
tsx
import { useTheme } from 'next-themes';
import { useEffect } from 'react';export function ThemeBridge() { const { resolvedTheme } = useTheme();
useEffect(() => { if (resolvedTheme === 'dark' || resolvedTheme === 'light') { ui.configure({ mode: resolvedTheme }); } }, [resolvedTheme]);
return null;
}
`
Want to test these options live?
Launch the interactive playground to experiment with themes, positions, and live generators.