fix: sonner theme not work

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} />
   );

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>

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">