feat: replace Toaster with SonnerToast component for theme integration

Signed-off-by: Jubayer <[email protected]>

apps/web/app/layout.tsx

@@ -1,10 +1,10 @@
 import { AuthProvider } from '@/providers/authContext';
+import SonnerToast from '@/providers/SonnerToast';
 import { SiteThemeProviders } from '@/providers/theme.provider';
 import '@/styles/globals.css';
 import type { Metadata } from 'next';
 import { ThemeProvider } from 'next-themes';
 import { Inter } from 'next/font/google';
-import { Toaster } from 'sonner';
 
 const inter = Inter({
   subsets: ['latin'],
@@ -36,7 +36,7 @@ export default function RootLayout({
           <SiteThemeProviders>
             <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
               {children}
-              <Toaster />
+              <SonnerToast />
             </ThemeProvider>
           </SiteThemeProviders>
         </AuthProvider>

apps/web/providers/SonnerToast.tsx

@@ -0,0 +1,10 @@
+'use client';
+import { useTheme } from 'next-themes';
+import { Toaster, ToasterProps } from 'sonner';
+
+const SonnerToast = () => {
+  const { theme } = useTheme();
+  return <Toaster theme={theme as ToasterProps['theme']} />;
+};
+
+export default SonnerToast;