From c180941ce6ce090f6846729b371654a1733682cf Mon Sep 17 00:00:00 2001
From: dvelo <52332868+DeveloLongScript@users.noreply.github.com>
Date: Sat, 10 Aug 2024 11:24:54 -0500
Subject: [PATCH] feat: themed toaster

---
 src/app/layout.tsx                    |  4 ++--
 src/components/misc/ThemedToaster.tsx | 20 ++++++++++++++++++++
 2 files changed, 22 insertions(+), 2 deletions(-)
 create mode 100644 src/components/misc/ThemedToaster.tsx

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 93662b6..c883086 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -3,7 +3,6 @@ import { Server } from "lucide-react";
 import { SpeedInsights } from "@vercel/speed-insights/next";
 import { Analytics } from "@vercel/analytics/react";
 import "./globals.css";
-import { Toaster } from "react-hot-toast";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { ThemeProvider } from "@/components/ThemeProvider";
 import { ClerkThemeProvider } from "@/components/clerk/ClerkThemeProvider";
@@ -19,6 +18,7 @@ import TopBar from "@/components/clerk/Topbar";
 import TextFromPathname from "@/components/TextFromPathname";
 import { Inter as interFont } from "next/font/google";
 import { CommandBarer } from "@/components/CommandBar";
+import ThemedToaster from "@/components/misc/ThemedToaster";
 
 const inter = interFont({ variable: "--font-inter", subsets: ["latin"] });
 export default async function RootLayout({
@@ -64,7 +64,7 @@ export default async function RootLayout({
             <NextTopLoader />
             {children}
           </div>{" "}
-          <Toaster position="bottom-center" reverseOrder={false} />
+          <ThemedToaster />
           <CommandBarer />
           <SpeedInsights />
           <Analytics />
diff --git a/src/components/misc/ThemedToaster.tsx b/src/components/misc/ThemedToaster.tsx
new file mode 100644
index 0000000..b8bdf9d
--- /dev/null
+++ b/src/components/misc/ThemedToaster.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { Toaster } from "react-hot-toast";
+
+export default function ThemedToaster() {
+  const { resolvedTheme } = useTheme();
+
+  return (
+    <Toaster
+      position="bottom-center"
+      reverseOrder={false}
+      toastOptions={
+        resolvedTheme == "dark"
+          ? { style: { background: "#333", color: "#fff" } }
+          : undefined
+      }
+    />
+  );
+}