#5073 - fix datepicker styling in dark mode (#5074)

This PR fixes three issues with the datepicker in dark mode. The
following UI elements now appear in light colors when the theme is set
to dark mode:

- The selected date.
- The clock icon.
- The date time input component.

Before:
<img width="1003" alt="theming bug"
src="https://github.com/twentyhq/twenty/assets/16918891/914b7043-e692-4de8-8440-ddd89cbf3973">

After:
<img width="374" alt="dark_theme_calendar_after"
src="https://github.com/twentyhq/twenty/assets/16918891/346fd950-1ef8-405e-9486-59abb81f92db">
<img width="347" alt="light_theme_calendar_after"
src="https://github.com/twentyhq/twenty/assets/16918891/17463094-53e5-4bc4-8812-a53a37cd08ed">

#5073

Co-authored-by: Thomas Trompette <thomast@twenty.com>

packages/twenty-front/src/modules/ui/input/components/internal/date/components/DateTimeInput.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useIMask } from 'react-imask';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { DateTime } from 'luxon';
 
@@ -26,7 +27,11 @@ const StyledInput = styled.input<{ hasError?: boolean }>`
   font-weight: 500;
   font-size: ${({ theme }) => theme.font.size.md};
   width: 100%;
-  color: ${({ hasError, theme }) => (hasError ? theme.color.red : 'inherit')};
+  ${({ hasError, theme }) =>
+    hasError &&
+    css`
+      color: ${theme.color.red};
+    `};
 `;
 
 type DateTimeInputProps = {

packages/twenty-front/src/modules/ui/input/components/internal/date/components/InternalDatePicker.tsx

@@ -255,7 +255,7 @@ const StyledContainer = styled.div`
 
   & .react-datepicker__day--selected {
     background-color: ${({ theme }) => theme.color.blue};
-    color: ${({ theme }) => theme.font.color.inverted};
+    color: ${({ theme }) => theme.grayScale.gray0};
   }
 
   & .react-datepicker__day--outside-month {