From abfa1af36de364727334d86c80d06d1ace4b282f Mon Sep 17 00:00:00 2001
From: ReaJason <reajason1225@gmail.com>
Date: Fri, 14 Feb 2025 23:11:59 +0800
Subject: [PATCH] fix: sonner theme not work

---
 web/src/components/ui/sonner.tsx | 3 +--
 web/src/main.tsx                 | 2 --
 web/src/routes/__root.tsx        | 2 ++
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/web/src/components/ui/sonner.tsx b/web/src/components/ui/sonner.tsx
index 79238b0a..ae395ae6 100644
--- a/web/src/components/ui/sonner.tsx
+++ b/web/src/components/ui/sonner.tsx
@@ -4,8 +4,7 @@ import { useTheme } from "@/components/theme-provider.tsx";
 type ToasterProps = React.ComponentProps<typeof Sonner>;
 
 const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme();
-
+  const { theme } = useTheme();
   return (
     <Sonner theme={theme as ToasterProps["theme"]} richColors className="toaster group" toastOptions={{}} {...props} />
   );
diff --git a/web/src/main.tsx b/web/src/main.tsx
index e41a48fc..e6c4a850 100644
--- a/web/src/main.tsx
+++ b/web/src/main.tsx
@@ -3,7 +3,6 @@ import ReactDOM from "react-dom/client";
 import { routeTree } from "./routeTree.gen";
 import "./index.css";
 import { TailwindIndicator } from "@/components/tailwind-indicator.tsx";
-import { Toaster } from "@/components/ui/sonner.tsx";
 import { env } from "@/config.ts";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { I18nextProvider } from "react-i18next";
@@ -29,7 +28,6 @@ if (!rootElement.innerHTML) {
   root.render(
     <QueryClientProvider client={queryClient}>
       <I18nextProvider i18n={i18n}>
-        <Toaster />
         <RouterProvider router={router} />
         {env.MODE !== "production" && <TailwindIndicator />}
       </I18nextProvider>
diff --git a/web/src/routes/__root.tsx b/web/src/routes/__root.tsx
index bc75eacb..1a417554 100644
--- a/web/src/routes/__root.tsx
+++ b/web/src/routes/__root.tsx
@@ -2,6 +2,7 @@ import { LanguageSwitcher } from "@/components/language-switcher";
 import { ModeToggle } from "@/components/mode-toggle.tsx";
 import { ThemeProvider } from "@/components/theme-provider.tsx";
 import { Button } from "@/components/ui/button.tsx";
+import { Toaster } from "@/components/ui/sonner";
 import VersionBadge from "@/components/version-badge";
 import { Outlet, createRootRoute } from "@tanstack/react-router";
 
@@ -12,6 +13,7 @@ export const Route = createRootRoute({
 function RootComponent() {
   return (
     <ThemeProvider defaultTheme="system" storageKey="vite-ui-theme">
+      <Toaster />
       <div className="min-h-screen">
         <header className="border-b px-4 py-3">
           <div className="flex items-center justify-between">