Theming

Customize toast notifications with different themes, styles, and animations.

Theme Selector

React Toast Kit supports light, dark and system themes out of the box. Try them below:

Theme Implementation

Provider-Level Theming

Set the default theme for all toast notifications using the ToastProvider:

// Setting theme at the provider level
<ToastProvider
  defaultTheme="dark" // 'light', 'dark', or 'system'
>
  <App />
</ToastProvider>

Dynamic Theme Switching

Change the theme based on user preference:

// Dynamic theme changes
import { useToast } from 'react-toast-kit';

function ThemeController() {
  const { setTheme } = useToast();
  
  return (
    <div>
      <button onClick={() => setTheme('light')}>Light Mode</button>
      <button onClick={() => setTheme('dark')}>Dark Mode</button>
      <button onClick={() => setTheme('system')}>System Preference</button>
    </div>
  );
}

Individual Toast Theme Override

Override the global theme for specific toast notifications:

// Per-toast theme override
toast.success({
  title: 'Success',
  description: 'This toast has a specific theme',
  theme: 'dark' // Override global theme for this toast
});

Tailwind CSS Integration

React Toast Kit is built with Tailwind CSS and integrates seamlessly with your Tailwind setup.

Tailwind Dark Mode Configuration

Ensure your Tailwind config is set up for dark mode:

// Tailwind configuration for dark mode
// tailwind.config.js
module.exports = {
  // ...
  darkMode: 'class', // Enable dark mode with class strategy
  // ...
}

Note:

When using the system theme, React Toast Kit will automatically detect the user's preferred color scheme and apply it to toast notifications.

Custom Styling

In addition to theme support, you can customize individual toast styles:

CSS Classes

toast.success({
  title: 'Success',
  description: 'Custom styled toast',
  className: 'my-custom-toast-class'
});

Inline Styles

toast.info({
  title: 'Info',
  description: 'Inline styled toast',
  style: { 
    borderLeft: '4px solid #3b82f6' 
  }
});

Custom Component Example

toast.custom(
  <div className="bg-gradient-to-r from-purple-500 to-pink-500 p-4 rounded-lg shadow-lg">
    <div className="flex items-center">
      <div className="text-white">
        <h3 className="font-bold">Custom Theme</h3>
        <p className="text-sm opacity-80">This is a fully customized toast component</p>
      </div>
    </div>
  </div>
);

Advanced Customization

For more advanced customization, React Toast Kit provides options for styling at different levels:

Container Styling

<ToastProvider
  containerClassName="my-container-class"
  topOffset={80} // Adjusts for header height
  bottomOffset={60} // Adjusts for footer height
>
  <App />
</ToastProvider>

Global Toast Styling

<ToastProvider
  toastClassName="my-global-toast-class"
>
  <App />
</ToastProvider>

CSS Variables

Add a class to an individual toast and override its design tokens from your global stylesheet:

toast.success({
  title: 'Branded toast',
  className: 'brand-toast',
});

/* Loaded after react-toast-kit/styles.css */
.react-toast.brand-toast {
  --rtk-accent: #7c3aed;
  --rtk-soft: rgb(124 58 237 / 14%);
  --rtk-surface: #ffffff;
  --rtk-text: #18181b;
  --rtk-muted: #71717a;
  --rtk-border: rgb(124 58 237 / 24%);
}

.react-toast.brand-toast[data-theme='dark'] {
  --rtk-surface: #18181b;
  --rtk-text: #fafafa;
  --rtk-muted: #a1a1aa;
}

Features Next.js Integration