added dark mode icons

src/layouts/white/components/header/Header.jsx

@@ -9,10 +9,11 @@ import {
   Link as MaterialLink,
   Grid,
 } from '@material-ui/core';
-import SwitchToogle from './switchToogle'
-import CachedOutlinedIcon from '@material-ui/icons/CachedOutlined';
+import DarkModeToogle from './darkModeToogle'
+import ArtTrackOutlinedIcon from '@material-ui/icons/ArtTrackOutlined';
 import { makeStyles } from '@material-ui/styles';
 
+
 const useStyles = makeStyles((theme) => ({
   appBar: {
     position: 'fixed',
@@ -23,9 +24,14 @@ const useStyles = makeStyles((theme) => ({
     textTransform: 'uppercase',
     letterSpacing: '.5rem',
   },
-  cached: {
-    color: '#a5d6a7',
+  white: {
+    color: "#fff",
   },
+  black: {
+    color: "#000",
+  },
+  
+
 }));
 const handleClick = (event) => {
   event.preventDefault();
@@ -42,6 +48,7 @@ const Header = (props) => {
   const classes = useStyles();
   const { darkMode, setDarkMode } = props;
 
+
   return (
     <>
       <CssBaseline />
@@ -69,12 +76,12 @@ const Header = (props) => {
             </Grid>
             <Grid item >
               <Grid container alignItems="center">
-                <SwitchToogle
+                <DarkModeToogle
               darkMode={darkMode}
               setDarkMode={setDarkMode}
               />
                 <Link to="/projects">
-                <CachedOutlinedIcon className={classes.cached} />
+                <ArtTrackOutlinedIcon className={darkMode ? classes.white: classes.black} />
               </Link>
               </Grid>
             </Grid>

src/layouts/white/components/header/darkModeToogle/DarkModeToogle.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/styles';
+import WbSunnyOutlinedIcon from '@material-ui/icons/WbSunnyOutlined';
+import NightsStayOutlinedIcon from '@material-ui/icons/NightsStayOutlined';
+
+
+const useStyles = makeStyles((theme) => ({
+ white: {
+  color: "#fff",
+  marginRight:'1rem'
+},
+black: {
+  color: "#000",
+  marginRight:'1rem'
+},
+}));
+
+const DarkModeToogle = (props) => {
+  const classes = useStyles();
+  const { darkMode, setDarkMode } = props;
+
+  return (
+  <span onClick={() => setDarkMode(!darkMode)}>
+    {darkMode ?
+    <WbSunnyOutlinedIcon className={classes.white}/> : <NightsStayOutlinedIcon className={classes.black}/>}
+  </span>
+
+  );
+};
+
+export default DarkModeToogle;

src/layouts/white/components/header/darkModeToogle/index.js

@@ -0,0 +1 @@
+export { default } from './DarkModeToogle';

src/layouts/white/components/header/switchToogle/SwitchToogle.jsx

@@ -1,86 +0,0 @@
-import React from 'react';
-import { Switch } from '@material-ui/core';
-import { makeStyles } from '@material-ui/styles';
-import {Brightness3Icon, WbSunnyIcon} from '@material-ui/icons';
-
-const useStyles = makeStyles((theme) => ({
-  root: {
-    width: 80,
-    height: 48,
-    padding: 8,
-  },
-  switchBase: {
-    padding: 11,
-    color: '#ff6a00',
-  },
-  thumb: {
-    width: 26,
-    height: 26,
-    backgroundColor: 'transparent',
-  },
-  track: {
-    background: 'linear-gradient(to right, #ee0979, #ff6a00)',
-    opacity: '1 !important',
-    borderRadius: 20,
-    position: 'relative',
-    '&:before, &:after': {
-      display: 'inline-block',
-      position: 'absolute',
-      top: '50%',
-      width: '50%',
-      transform: 'translateY(-50%)',
-      color: '#fff',
-      textAlign: 'center',
-    },
-    '&:before': {
-      left: 4,
-      opacity: 0,
-    },
-    '&:after': {
-      right: 4,
-    },
-  },
-  checked: {
-    '&$switchBase': {
-      color: '#185a9d',
-      transform: 'translateX(32px)',
-      '&:hover': {
-        backgroundColor: 'rgba(24,90,257,0.08)',
-      },
-    },
-    '& $thumb': {
-      backgroundColor: 'transparent',
-    },
-    '& + $track': {
-      background: 'linear-gradient(to right, #43cea2, #185a9d)',
-      '&:before': {
-        opacity: 1,
-      },
-      '&:after': {
-        opacity: 0,
-      },
-    },
-  },
-}));
-
-const SwitchToogle = (props) => {
-  const classes = useStyles();
-  const { darkMode, setDarkMode } = props;
-
-  return (
-    <Switch
-    disableRipple
-      checked={darkMode}
-      onChange={() => setDarkMode(!darkMode)}
-      classes={{
-        root: classes.root,
-        switchBase: classes.switchBase,
-        thumb: classes.thumb,
-        track: classes.track,
-        checked: classes.checked,
-      }}
-    />
-  );
-};
-
-export default SwitchToogle;

src/layouts/white/components/header/switchToogle/index.js

@@ -1 +0,0 @@
-export { default } from './SwitchToogle';