Theming

NativeToast ships with two themes and multiple ways to control them at runtime.

Theme Tokens

Dark Theme (default)

Light Theme

Tokens are applied to the toast background color, text color, and shadow opacity.

Ways to Set the Theme

1. Container-level (per-app)

Set the theme directly on the ToastContainer component:

<ToastContainer theme="light" />

This is the simplest approach for apps that use a single fixed theme.

2. Global theme store

For apps that support runtime theme switching, use the global theme store:

import { setTheme, useTheme } from '@ncrft/native-toast';

// Set the theme from anywhere
setTheme('light');

// Read the current theme in any component
function ThemeToggle() {
  const theme = useTheme();
  // theme === 'light' | 'dark'
}

The global theme store works independently of React context — call setTheme() from anywhere, including non-component code.

Priority

If both are set, the container-level theme prop takes precedence over the global theme store.

Style Overrides

User-provided style and textStyle options on individual toasts override theme tokens:

// Theme says white background, but this toast uses blue
toast('Special', {
  style: { backgroundColor: '#007AFF' },
});