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') {