strtus/Vercel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Change modal backgrounds for light mode

Browse Source
This commit is contained in:
Sam Becker 2025-04-13 15:44:08 -05:00
parent 0cef385623
commit 20eaf39e4d
2 changed files with 13 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/Modal.tsx
View File

@ -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,
)}
>

4
src/toast/ToasterWithThemes.tsx
View File

@ -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(