fix: theme was not used when passed to Toaster

gunnartorfis · Sep 10, 2024 · 34904f5 · 34904f5
1 parent c64256a
commit 34904f5
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 3 deletions.
diff --git 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: <Text>💥</Text>,
             loading: <Text>🔄</Text>,

diff --git 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 | undefined>) => 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
@@ -44,6 +44,7 @@ export const ToasterUI: React.FC<ToasterProps> = ({
   pauseWhenPageIsHidden,
   cn,
   gap,
+  theme,
   ...props
 }) => {
   const [toasts, setToasts] = React.useState<ToastProps[]>([]);
@@ -163,6 +164,7 @@ export const ToasterUI: React.FC<ToasterProps> = ({
         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<ToasterProps> = ({
       pauseWhenPageIsHidden,
       cn,
       gap,
+      theme,
     ]
   );
 

diff --git 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
@@ -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') {
-Original file line number
+Diff line change
@@ Expand Up / @@ -135,6 +135,7 @@ export type ToasterContextType = Required< @@
         | 'pauseWhenPageIsHidden'
         | 'cn'
         | 'gap'
+        | 'theme'
       >
     > & {
       addToast: AddToastContextHandler;
@@ Expand Down @@