diff --git a/frontend/src/components/ui/toaster.tsx b/frontend/src/components/ui/toaster.tsx
index e7897e2..80a5478 100644
--- a/frontend/src/components/ui/toaster.tsx
+++ b/frontend/src/components/ui/toaster.tsx
@@ -2,33 +2,50 @@ import { X, CheckCircle, AlertCircle, AlertTriangle, Info } from 'lucide-react'
 import { useToast } from './use-toast'
 import { cn } from '@/lib/utils'
 
-const toastStyles = {
-  success: 'border-green-400 bg-white text-green-700 dark:border-green-600 dark:bg-gray-900 dark:text-green-400',
-  error: 'border-red-400 bg-white text-red-700 dark:border-red-600 dark:bg-gray-900 dark:text-red-400',
-  warning: 'border-amber-400 bg-white text-amber-700 dark:border-amber-600 dark:bg-gray-900 dark:text-amber-400',
-  info: 'border-blue-400 bg-white text-blue-700 dark:border-blue-600 dark:bg-gray-900 dark:text-blue-400',
-}
+const toastConfig = {
+  success: {
+    border: 'border-green-300 dark:border-green-600',
+    text: 'text-green-500 dark:text-green-400',
+    Icon: CheckCircle,
+  },
+  error: {
+    border: 'border-red-300 dark:border-red-600',
+    text: 'text-red-500 dark:text-red-400',
+    Icon: AlertCircle,
+  },
+  warning: {
+    border: 'border-amber-300 dark:border-amber-600',
+    text: 'text-amber-500 dark:text-amber-400',
+    Icon: AlertTriangle,
+  },
+  info: {
+    border: 'border-blue-300 dark:border-blue-600',
+    text: 'text-blue-500 dark:text-blue-400',
+    Icon: Info,
+  },
+} as const
 
-const toastIcons = {
-  success: CheckCircle,
-  error: AlertCircle,
-  warning: AlertTriangle,
-  info: Info,
-}
+type ToastType = keyof typeof toastConfig
 
 export function Toaster() {
   const { toasts, removeToast } = useToast()
 
+  // 检测是否为深色模式
+  const isDark = typeof document !== 'undefined' && document.documentElement.classList.contains('dark')
+
   return (
     <div className="fixed top-4 right-4 z-50 flex flex-col gap-2 w-full max-w-sm">
       {toasts.map((toast) => {
-        const Icon = toastIcons[toast.type] || Info
+        const config = toastConfig[toast.type as ToastType] || toastConfig.info
+        const Icon = config.Icon
         return (
           <div
             key={toast.id}
+            style={{ backgroundColor: isDark ? '#1f2937' : '#ffffff' }}
             className={cn(
               "relative rounded-lg border p-4 shadow-lg animate-in slide-in-from-right",
-              toastStyles[toast.type] || toastStyles.info
+              config.border,
+              config.text
             )}
           >
             <div className="flex items-start gap-3">