Color picker rework (#232)

Co-authored-by: Camille Moussu <cmoussu@linagora.com>

src/components/Calendar/Calendar.tsx

@@ -40,6 +40,8 @@ import momentTimezonePlugin from "@fullcalendar/moment-timezone";
 import { TimezoneSelector } from "./TimezoneSelector";
 import { MiniCalendar } from "./MiniCalendar";
 import { User } from "../Attendees/PeopleSearch";
+import { useTheme } from "@mui/material/styles";
+import { updateDarkColor } from "./utils/calendarColorsUtils";
 
 interface CalendarAppProps {
   calendarRef: React.RefObject<CalendarApi | null>;
@@ -58,7 +60,7 @@ export default function CalendarApp({
   const userId =
     useAppSelector((state) => state.user.userData?.openpaasId) ?? "";
   const dispatch = useAppDispatch();
-
+  const theme = useTheme();
   useEffect(() => {
     if (!tokens || !userId) {
       dispatch(push("/"));
@@ -108,6 +110,15 @@ export default function CalendarApp({
     }
   }, [calendars, userId]);
 
+  useEffect(() => {
+    updateDarkColor(calendars, theme, dispatch);
+  }, [
+    theme,
+    Object.values(calendars)
+      .map((c) => c.color?.dark)
+      .join(","),
+  ]);
+
   useEffect(() => {
     const validCalendarIds = new Set(Object.keys(calendars));
     setSelectedCalendars((prev) =>