Enable dark mode and fix theme

front/src/modules/ui/components/buttons/IconButton.tsx

@@ -12,9 +12,6 @@ const StyledIconButton = styled.button`
   border: none;
   border-radius: 50%;
 
-  background: ${(props) => props.theme.text80};
-  color: ${(props) => props.theme.text100};
-
   transition: color 0.1s ease-in-out, background 0.1s ease-in-out;
 
   background: ${(props) => props.theme.blue};
@@ -22,7 +19,7 @@ const StyledIconButton = styled.button`
   cursor: pointer;
 
   &:disabled {
-    background: ${(props) => props.theme.quadraryBackground};
+    background: ${(props) => props.theme.quaternaryBackground};
     color: ${(props) => props.theme.text80};
     cursor: default;
   }

front/src/modules/ui/components/form/DatePicker.tsx

@@ -166,10 +166,6 @@ const StyledContainer = styled.div`
     line-height: 34px;
   }
 
-  & .react-datepicker__day--selected {
-    background-color: ${(props) => props.theme.blue};
-  }
-
   & .react-datepicker__navigation--previous,
   & .react-datepicker__navigation--next {
     height: 34px;
@@ -205,12 +201,26 @@ const StyledContainer = styled.div`
     border-color: ${(props) => props.theme.text40};
   }
 
+  & .react-datepicker__day--keyboard-selected {
+    background-color: inherit;
+  }
+
+  & .react-datepicker__day,
+  .react-datepicker__time-name {
+    color: ${(props) => props.theme.text80};
+  }
+
+  & .react-datepicker__day--selected {
+    background-color: ${(props) => props.theme.blue};
+    color: ${(props) => props.theme.text0};
+  }
+
   & .react-datepicker__day--outside-month {
     color: ${(props) => props.theme.text40};
   }
 
-  & .react-datepicker__day--keyboard-selected {
-    background-color: inherit;
+  & .react-datepicker__day:hover {
+    color: ${(props) => props.theme.text40};
   }
 `;
 

front/src/modules/ui/layout/AppLayout.tsx

@@ -1,10 +1,8 @@
-import { ThemeProvider } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import { User } from '@/users/interfaces/user.interface';
 
 import { Navbar } from './navbar/Navbar';
-import { lightTheme } from './styles/themes';
 
 const StyledLayout = styled.div`
   display: flex;
@@ -31,17 +29,15 @@ type OwnProps = {
 export function AppLayout({ children, user }: OwnProps) {
   const userIsAuthenticated = !!user;
   return (
-    <ThemeProvider theme={lightTheme}>
-      <StyledLayout>
-        {userIsAuthenticated ? (
-          <>
-            <Navbar user={user} workspace={user?.workspaceMember?.workspace} />
-            <MainContainer>{children}</MainContainer>
-          </>
-        ) : (
-          children
-        )}
-      </StyledLayout>
-    </ThemeProvider>
+    <StyledLayout>
+      {userIsAuthenticated ? (
+        <>
+          <Navbar user={user} workspace={user?.workspaceMember?.workspace} />
+          <MainContainer>{children}</MainContainer>
+        </>
+      ) : (
+        children
+      )}
+    </StyledLayout>
   );
 }

front/src/modules/ui/layout/navbar/WorkspaceContainer.tsx

@@ -36,6 +36,7 @@ const StyledName = styled.div`
   font-family: 'Inter';
   font-weight: 500;
   font-size: ${(props) => props.theme.fontSizeLarge};
+  color: ${(props) => props.theme.text80};
 `;
 
 function WorkspaceContainer({ workspace }: OwnProps) {

front/src/modules/ui/layout/styles/themes.ts

@@ -27,10 +27,11 @@ const commonTheme = {
 
 const lightThemeSpecific = {
   noisyBackground: `url(${LightNoise.toString()});`,
+
   primaryBackground: '#fff',
   secondaryBackground: '#fcfcfc',
   tertiaryBackground: '#f5f5f5',
-  quadraryBackground: '#ebebeb',
+  quaternaryBackground: '#ebebeb',
 
   pinkBackground: '#ffe5f4',
   greenBackground: '#e6fff2',
@@ -68,8 +69,8 @@ const darkThemeSpecific: typeof lightThemeSpecific = {
   noisyBackground: `url(${DarkNoise.toString()});`,
   primaryBackground: '#141414',
   secondaryBackground: '#171717',
-  tertiaryBackground: '#333333',
-  quadraryBackground: '#444444',
+  tertiaryBackground: '#1B1B1B',
+  quaternaryBackground: '#1D1D1D',
 
   pinkBackground: '#cc0078',
   greenBackground: '#1e7e50',
@@ -115,6 +116,7 @@ export const textInputStyle = (props: any) =>
     border: none;
     outline: none;
     background-color: transparent;
+    color: ${props.theme.text80};
 
     &::placeholder,
     &::-webkit-input-placeholder {

front/src/modules/utils/utils.ts

@@ -9,3 +9,7 @@ export const humanReadableDate = (date: Date) => {
 export const getLogoUrlFromDomainName = (domainName?: string): string => {
   return `https://api.faviconkit.com/${domainName}/144`;
 };
+
+export const browserPrefersDarkMode = (): boolean => {
+  return window.matchMedia('(prefers-color-scheme: dark)').matches;
+};