feat(darkMode): add toggle dark mode button

src/app/App.tsx

@@ -11,7 +11,7 @@ import {
 } from '@mui/material/styles';
 import frLocale from 'date-fns/locale/fr';
 import { SnackbarKey, SnackbarProvider } from 'notistack';
-import { createRef, useMemo, useState } from 'react';
+import { createRef, useEffect, useMemo, useState } from 'react';
 
 import { DRAWER_MENU_WIDTH } from '../config/Constants';
 import { components, getPalette, typography } from '../config/CustomTheme';
@@ -32,16 +32,18 @@ const MainContainer = styled(Container)(({ theme }) => ({
 function App() {
   // Theme configuration
   const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
-  const [mode, setMode] = useState<PaletteMode>(prefersDarkMode ? 'light' : 'light');
-  let theme = useMemo(
-    () =>
-      createTheme({
-        components,
-        palette: getPalette(mode),
-        typography: typography
-      }),
-    [prefersDarkMode]
-  );
+  const [themeMode, setThemeMode] = useState<PaletteMode>(prefersDarkMode ? 'dark' : 'light');
+  useEffect(() => {
+    setThemeMode(prefersDarkMode ? 'dark' : 'light');
+  }, [prefersDarkMode]);
+  let theme = useMemo(() => {
+    return createTheme({
+      components,
+      palette: getPalette(themeMode),
+      typography: typography
+    });
+  }, [themeMode]);
+
   theme = responsiveFontSizes(theme);
 
   const [isMenuOpen, setIsMenuOpen] = useState(false);
@@ -54,6 +56,10 @@ function App() {
     setIsMenuOpen(!isMenuOpen);
   };
 
+  const toggleThemeMode = () => {
+    setThemeMode(themeMode === 'light' ? 'dark' : 'light');
+  };
+
   return (
     <LocalizationProvider dateAdapter={DateAdapter} locale={frLocale}>
       <StyledEngineProvider injectFirst>
@@ -73,6 +79,7 @@ function App() {
                 width={DRAWER_MENU_WIDTH}
                 open={isMenuOpen}
                 toggleDrawerMenu={toggleDrawerMenu}
+                toggleThemeMode={toggleThemeMode}
               />
               <MainContent>
                 <Router />

src/app/DrawerMenu.tsx

@@ -1,4 +1,6 @@
 import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
+import DarkModeIcon from '@mui/icons-material/DarkMode';
+import LightModeIcon from '@mui/icons-material/LightMode';
 import ListAltIcon from '@mui/icons-material/ListAlt';
 import SettingsIcon from '@mui/icons-material/Settings';
 import TimelineIcon from '@mui/icons-material/Timeline';
@@ -16,6 +18,8 @@ import {
 import { FC } from 'react';
 import { Link } from 'react-router-dom';
 
+import { useThemeMode } from './hooks';
+
 interface MenuItemProps {
   icon: React.ReactNode;
   name: string;
@@ -32,10 +36,12 @@ const MenuItem: FC<MenuItemProps> = ({ icon, name, onClick, url }) => (
 interface Props {
   open: boolean;
   toggleDrawerMenu: () => void;
+  toggleThemeMode: () => void;
   width: string;
 }
 
-const DrawerMenu: FC<Props> = ({ open, toggleDrawerMenu, width }) => {
+const DrawerMenu: FC<Props> = ({ open, toggleDrawerMenu, toggleThemeMode, width }) => {
+  const themeMode = useThemeMode();
   return (
     <SwipeableDrawer
       anchor="left"
@@ -50,7 +56,10 @@ const DrawerMenu: FC<Props> = ({ open, toggleDrawerMenu, width }) => {
           boxSizing: 'border-box'
         }
       }}>
-      <Box sx={{ display: 'flex', justifyContent: 'right' }}>
+      <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
+        <IconButton sx={{ ml: 1 }} onClick={toggleThemeMode} color="inherit">
+          {themeMode === 'dark' ? <DarkModeIcon /> : <LightModeIcon />}
+        </IconButton>
         <IconButton onClick={toggleDrawerMenu}>
           <ChevronLeftIcon />
         </IconButton>

src/app/hooks.ts

@@ -1,7 +1,18 @@
+import { useTheme } from '@mui/material';
+import { useEffect, useState } from 'react';
 import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
 
 import type { AppDispatch, RootState } from '../store/store';
 
 // Use throughout your app instead of plain `useDispatch` and `useSelector`
 export const useAppDispatch = () => useDispatch<AppDispatch>();
 export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
+
+export const useThemeMode = () => {
+  const [themeMode, setThemeMode] = useState('light');
+  const theme = useTheme();
+  useEffect(() => {
+    setThemeMode(theme.palette.mode);
+  }, [theme]);
+  return themeMode;
+};

src/components/TrackerList/AddTrackerCard.tsx

@@ -3,23 +3,26 @@ import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
 import { Box, Card, CardActionArea, CardContent, CardProps } from '@mui/material';
 import { FC, useState } from 'react';
 
+import { useThemeMode } from '../../app/hooks';
 import TrackerForm from '../forms/TrackerForm/TrackerForm';
 
 interface Props {
   cardProps?: CardProps;
 }
 const AddTrackerCard: FC<Props> = ({ cardProps }) => {
   const [displayCreateForm, setDisplayCreateForm] = useState(false);
+  const themeMode = useThemeMode();
+
+  const hoverColor = themeMode === 'light' ? 'accent.main' : 'secondary.main';
+  const cardActionSx = {
+    '&:hover': {
+      backgroundColor: displayCreateForm ? '' : hoverColor
+    }
+  };
 
   return (
     <Card {...cardProps}>
-      <CardActionArea
-        onClick={() => setDisplayCreateForm(!displayCreateForm)}
-        sx={{
-          '&:hover': {
-            backgroundColor: displayCreateForm ? '' : 'accent.main'
-          }
-        }}>
+      <CardActionArea onClick={() => setDisplayCreateForm(!displayCreateForm)} sx={cardActionSx}>
         <CardContent>
           <Box
             sx={{

src/components/forms/RequiredCompletionsForm/RequiredCompletionsForm.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
 import DeleteIcon from '@mui/icons-material/Delete';
-import { Button, Grid, GridProps, IconButton, Typography } from '@mui/material';
+import { Button, Grid, GridProps, IconButton, Typography, useTheme } from '@mui/material';
 import { FC } from 'react';
 import {
   Control,
@@ -11,12 +11,12 @@ import {
   UseFieldArrayRemove
 } from 'react-hook-form';
 
+import { useThemeMode } from '../../../app/hooks';
 import { FormValues } from '../TrackerForm/types';
 import CompletionQuantityTextField from '../completions/CompletionQuantityTextField';
 import CompletionUnitTextField from '../completions/CompletionUnitTextField';
 
 export const FieldsetGrid = styled(Grid)`
-  background: rgba(255, 255, 255, 0.8);
   border: 1px solid rgba(0, 0, 0, 0.23);
   border-radius: 4px;
   padding: 8px;
@@ -37,17 +37,18 @@ interface Props {
  * @return {*}
  */
 const RequiredCompletionsForm: FC<Props> = ({ append, control, fields, gridProps, remove }) => {
+  const themeMode = useThemeMode();
+  const theme = useTheme();
+
+  const fieldsetSx = {
+    bgcolor: themeMode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900],
+    mb: 1
+  };
+
   return (
     <>
       {fields.map((field, index) => (
-        <FieldsetGrid
-          columns={2}
-          container
-          key={field.id}
-          sx={{
-            mb: 1
-          }}
-          {...gridProps}>
+        <FieldsetGrid columns={2} container key={field.id} sx={fieldsetSx} {...gridProps}>
           <Grid item xs={2} sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>
             <Typography variant="subtitle1">Objectif n°{index + 1}</Typography>
             {fields.length > 1 && (

src/config/CustomTheme.ts

@@ -3,8 +3,7 @@ import { PaletteMode, PaletteOptions } from '@mui/material';
 import { grey } from '@mui/material/colors';
 
 const CHARCOAL = {
-  main: '#2E4057',
-  contrastText: grey[100]
+  main: '#2E4057'
 };
 const YELLOW_CRAYOLA = {
   main: '#FFE66D'
@@ -64,6 +63,12 @@ export const getPalette = (mode: PaletteMode): PaletteOptions => ({
         ...commonTheme,
         background: {
           default: grey[900]
+        },
+        primary: {
+          main: '#7792BB'
+        },
+        text: {
+          primary: '#7792BB'
         }
       })
 });

src/pages/Trackers.tsx

@@ -1,10 +1,10 @@
 import BallotIcon from '@mui/icons-material/Ballot';
 import CheckIcon from '@mui/icons-material/Check';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
-import { Alert, Box, Tab, Tabs, Typography } from '@mui/material';
+import { Alert, Box, Tab, Tabs, Typography, useTheme } from '@mui/material';
 import { useState } from 'react';
 
-import { useAppSelector } from '../app/hooks';
+import { useAppSelector, useThemeMode } from '../app/hooks';
 import TabPanel from '../components/TabPanel/TabPanel';
 import AddTrackerCard from '../components/TrackerList/AddTrackerCard';
 import DateSelector from '../components/TrackerList/DateSelector';
@@ -23,8 +23,13 @@ function Trackers() {
   const handleTabChange = (event: React.SyntheticEvent, newTab: number) => {
     setSelectedTab(newTab);
   };
+  const theme = useTheme();
+  const themeMode = useThemeMode();
 
-  const cardSxProp = { mb: 2, bgcolor: 'secondary.main' };
+  const cardSxProp = {
+    mb: 2,
+    bgcolor: themeMode === 'light' ? 'secondary.main' : theme.palette.grey[900]
+  };
 
   return (
     <Box>