added dark theme

src/layouts/white/White.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Container } from '@material-ui/core';
 import {
   ThemeProvider,
@@ -23,26 +23,30 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-let theme = createMuiTheme({
-  typography: {
-    fontFamily: 'Yeon Sung',
-    transform: 'matrix(1, 0, 0, 1, 0, 0)',
-    // h1: {
-    //   // marginLeft: '-.5rem',
-    //   paddingLeft: 0,
-    // },
-  },
-});
-theme = responsiveFontSizes(theme);
-
 const White = (props) => {
   const { children } = props;
   const classes = useStyles();
+  const [darkMode, setDarkMode] = useState(true);
+
+  let theme = createMuiTheme({
+    typography: {
+      fontFamily: 'Yeon Sung',
+      transform: 'matrix(1, 0, 0, 1, 0, 0)',
+      // h1: {
+      //   // marginLeft: '-.5rem',
+      //   paddingLeft: 0,
+      // },
+    },
+    palette: {
+      type: darkMode ? 'dark' : 'light',
+    },
+  });
+  theme = responsiveFontSizes(theme);
 
   return (
     <ThemeProvider theme={theme}>
       <div id="back-to-top-anchor" />
-      <Header />
+      <Header darkMode={darkMode} setDarkMode={setDarkMode} />
       <Container className={classes.container}>{children}</Container>
       <Footer />
     </ThemeProvider>

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Link} from 'react-router-dom'
+import { Link } from 'react-router-dom';
 import {
   AppBar,
   Toolbar,
@@ -9,22 +9,25 @@ import {
   Link as MaterialLink,
   Grid,
 } from '@material-ui/core';
+import SwitchToogle from './switchToogle'
 import CachedOutlinedIcon from '@material-ui/icons/CachedOutlined';
-
 import { makeStyles } from '@material-ui/styles';
 
 const useStyles = makeStyles((theme) => ({
   appBar: {
     position: 'fixed',
     zIndex: 1301,
-    backgroundColor: '#FAFAFA',
+    backgroundColor: 'transparent',
   },
   name: {
     textTransform: 'uppercase',
     letterSpacing: '.5rem',
   },
+  cached: {
+    color: '#a5d6a7',
+  },
 }));
-function handleClick(event) {
+const handleClick = (event) => {
   event.preventDefault();
   const anchor = (event.target.ownerDocument || document).querySelector(
     '#footer'
@@ -33,10 +36,11 @@ function handleClick(event) {
   if (anchor) {
     anchor.scrollIntoView({ behavior: 'smooth', block: 'center' });
   }
-}
+};
 
-const Header = () => {
+const Header = (props) => {
   const classes = useStyles();
+  const { darkMode, setDarkMode } = props;
 
   return (
     <>
@@ -54,15 +58,25 @@ const Header = () => {
                   Dan Dobos
                 </Typography>
 
-                <MaterialLink color="textPrimary" to="#about" onClick={handleClick}>
+                <MaterialLink
+                  color="textPrimary"
+                  to="#about"
+                  onClick={handleClick}
+                >
                   About
                 </MaterialLink>
               </Breadcrumbs>
             </Grid>
-            <Grid item>
-              <Link color="textPrimary" to="/projects">
-                <CachedOutlinedIcon/>
+            <Grid item >
+              <Grid container alignItems="center">
+                <SwitchToogle
+              darkMode={darkMode}
+              setDarkMode={setDarkMode}
+              />
+                <Link to="/projects">
+                <CachedOutlinedIcon className={classes.cached} />
               </Link>
+              </Grid>
             </Grid>
           </Grid>
         </Toolbar>

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

@@ -0,0 +1,86 @@
+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

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