fix(component): correct notification theme when theme toggled (#8570)

close AF-1526

packages/frontend/component/src/ui/notification/desktop/notification-center.tsx

@@ -1,4 +1,5 @@
 import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { useTheme } from 'next-themes';
 import { type CSSProperties, useMemo } from 'react';
 import { Toaster } from 'sonner';
 
@@ -7,6 +8,8 @@ import type { NotificationCenterProps } from '../types';
 export function DesktopNotificationCenter({
   width = 380,
 }: NotificationCenterProps) {
+  const theme = useTheme();
+  const resolvedTheme = theme.resolvedTheme as 'light' | 'dark';
   const style = useMemo(() => {
     return {
       ...assignInlineVars({
@@ -32,6 +35,7 @@ export function DesktopNotificationCenter({
       className="affine-notification-center"
       style={style}
       toastOptions={toastOptions}
+      theme={resolvedTheme}
     />
   );
 }