Change modal backgrounds for light mode

src/components/Modal.tsx

@@ -8,8 +8,8 @@ import { useRouter } from 'next/navigation';
 import AnimateItems from './AnimateItems';
 import { PATH_ROOT } from '@/app/paths';
 import usePrefersReducedMotion from '@/utility/usePrefersReducedMotion';
-import useMetaThemeColor from '@/utility/useMetaThemeColor';
 import useEscapeHandler from '@/utility/useEscapeHandler';
+import { useTheme } from 'next-themes';
 
 export default function Modal({
   onClosePath,
@@ -45,7 +45,7 @@ export default function Modal({
     }
   }, []);
 
-  useMetaThemeColor({ colorLight: '#333' });
+  const { resolvedTheme } = useTheme();
 
   useClickInsideOutside({
     htmlElements,
@@ -70,12 +70,16 @@ export default function Modal({
         anchor === 'top'
           ? 'items-start pt-4 sm:pt-24'
           : 'items-center',
-        'bg-black',
+        'bg-white dark:bg-black',
       )}
       initial={!prefersReducedMotion
-        ? { backgroundColor: 'rgba(0, 0, 0, 0)' }
+        ? { backgroundColor: resolvedTheme === 'dark'
+          ? 'rgba(0, 0, 0, 0)'
+          : 'rgba(255, 255, 255, 0)' }
         : false}
-      animate={{ backgroundColor: 'rgba(0, 0, 0, 0.80)' }}
+      animate={{ backgroundColor: resolvedTheme === 'dark'
+        ? 'rgba(0, 0, 0, 0.80)'
+        : 'rgba(255, 255, 255, 0.80)' }}
       transition={{ duration: 0.3, easing: 'easeOut' }}
     >
       <AnimateItems
@@ -87,8 +91,9 @@ export default function Modal({
             container && 'w-[calc(100vw-1.5rem)] sm:w-[min(540px,90vw)]',
             container && !noPadding && 'p-3 md:p-4',
             container && 'rounded-lg md:rounded-xl',
-            container && 'dark:border dark:border-gray-800',
+            container && 'border-medium',
             'bg-white dark:bg-black',
+            'shadow-2xl/20 dark:shadow-2xl/100',
             className,
           )}
         >

src/toast/ToasterWithThemes.tsx

@@ -5,10 +5,10 @@ import { useTheme } from 'next-themes';
 import { Toaster } from 'sonner';
 
 export default function ToasterWithThemes() {
-  const { theme } = useTheme();
+  const { resolvedTheme } = useTheme();
   return (
     <Toaster
-      theme={theme as 'system' | 'light' | 'dark'}
+      theme={resolvedTheme as 'light' | 'dark' | undefined}
       toastOptions={{
         classNames: {
           toast: clsx(