diff --git a/example/src/App.tsx b/example/src/App.tsx
index a1f99e7..37dccb7 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -18,6 +18,7 @@ const App: React.FC = () => {
swipToDismissDirection="up"
visibleToasts={4}
closeButton
+ theme="system"
icons={{
error: 💥,
loading: 🔄,
diff --git a/src/constants.ts b/src/constants.ts
index 0a16747..28a1a03 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -1,4 +1,9 @@
-import type { ToastPosition, ToastSwipeDirection, ToastVariant } from './types';
+import type {
+ ToastPosition,
+ ToastSwipeDirection,
+ ToastTheme,
+ ToastVariant,
+} from './types';
export const toastDefaultValues: {
duration: number;
@@ -14,6 +19,7 @@ export const toastDefaultValues: {
pauseWhenPageIsHidden: boolean;
cn: (...classes: Array) => string;
gap: number;
+ theme: ToastTheme;
} = {
duration: 4000,
position: 'top-center',
@@ -28,4 +34,5 @@ export const toastDefaultValues: {
pauseWhenPageIsHidden: false,
cn: (...classes) => classes.filter(Boolean).join(' '),
gap: 14,
+ theme: 'system',
};
diff --git a/src/toaster.tsx b/src/toaster.tsx
index 6b61873..d64cb4b 100644
--- a/src/toaster.tsx
+++ b/src/toaster.tsx
@@ -44,6 +44,7 @@ export const ToasterUI: React.FC = ({
pauseWhenPageIsHidden,
cn,
gap,
+ theme,
...props
}) => {
const [toasts, setToasts] = React.useState([]);
@@ -163,6 +164,7 @@ export const ToasterUI: React.FC = ({
pauseWhenPageIsHidden ?? toastDefaultValues.pauseWhenPageIsHidden,
cn: cn ?? toastDefaultValues.cn,
gap: gap ?? toastDefaultValues.gap,
+ theme: theme ?? toastDefaultValues.theme,
}),
[
duration,
@@ -177,6 +179,7 @@ export const ToasterUI: React.FC = ({
pauseWhenPageIsHidden,
cn,
gap,
+ theme,
]
);
diff --git a/src/types.ts b/src/types.ts
index 82be4d0..a405c51 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -135,6 +135,7 @@ export type ToasterContextType = Required<
| 'pauseWhenPageIsHidden'
| 'cn'
| 'gap'
+ | 'theme'
>
> & {
addToast: AddToastContextHandler;
diff --git a/src/use-colors.ts b/src/use-colors.ts
index 4182818..f832a35 100644
--- a/src/use-colors.ts
+++ b/src/use-colors.ts
@@ -28,8 +28,9 @@ const dark: typeof light = {
};
export const useColors = (ivertProps?: boolean) => {
- const { invert: invertCtx } = useToastContext();
- const scheme = useColorScheme();
+ const { invert: invertCtx, theme } = useToastContext();
+ const systemScheme = useColorScheme();
+ const scheme = theme === 'system' ? systemScheme : theme;
const invert = ivertProps ?? invertCtx;
if (scheme === 'dark') {