WIP on Mantine v6

src/widgets/calendar/CalendarDay.tsx

@@ -1,5 +1,6 @@
-import { Box, Indicator, IndicatorProps, Popover } from '@mantine/core';
+import { Box, Indicator, IndicatorProps, Popover, useMantineTheme } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
+import { isToday } from '../../tools/isToday';
 import { MediaList } from './MediaList';
 import { MediasType } from './type';
 
@@ -10,6 +11,7 @@ interface CalendarDayProps {
 
 export const CalendarDay = ({ date, medias }: CalendarDayProps) => {
   const [opened, { close, open }] = useDisclosure(false);
+  const { colorScheme, colors } = useMantineTheme();
 
   if (medias.totalCount === 0) {
     return <div>{date.getDate()}</div>;
@@ -29,7 +31,17 @@ export const CalendarDay = ({ date, medias }: CalendarDayProps) => {
       opened={opened}
     >
       <Popover.Target>
-        <Box onClick={open}>
+        <Box
+          onClick={open}
+          style={{
+            margin: 5,
+            backgroundColor: isToday(date)
+              ? colorScheme === 'dark'
+                ? colors.dark[5]
+                : colors.gray[0]
+              : undefined,
+          }}
+        >
           <DayIndicator color="red" position="bottom-start" medias={medias.books}>
             <DayIndicator color="yellow" position="top-start" medias={medias.movies}>
               <DayIndicator color="blue" position="top-end" medias={medias.tvShows}>