hhhrrrttt222111 · EstebanToloza · Apr 4, 2022
diff --git a/package.json b/package.json
@@ -3,8 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.8.2",
+    "@emotion/styled": "^11.8.1",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.11.2",
+    "@mui/material": "^5.5.3",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",

diff --git a/src/components/Navbar/CustomizedSwitch.js b/src/components/Navbar/CustomizedSwitch.js
@@ -0,0 +1,85 @@
+import { useContext } from 'react';
+import { styled } from '@mui/material/styles';
+import FormGroup from '@mui/material/FormGroup';
+import { FormControlLabel } from '@mui/material';
+import Switch from '@mui/material/Switch';
+import { ThemeContext } from '../../contexts/ThemeContext';
+import { themeData } from '../../data/themeData';
+
+
+const MaterialUISwitch = styled(Switch)(({ theme }) => ({
+  width: 62,
+  height: 34,
+  padding: 7,
+  '& .MuiSwitch-switchBase': {
+    margin: 1,
+    padding: 0,
+    transform: 'translateX(6px)',
+    '&.Mui-checked': {
+      color: '#fff',
+      transform: 'translateX(22px)',
+      '& .MuiSwitch-thumb:before': {
+        backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent(
+          '#fff',
+        )}" d="M4.2 2.5l-.7 1.8-1.8.7 1.8.7.7 1.8.6-1.8L6.7 5l-1.9-.7-.6-1.8zm15 8.3a6.7 6.7 0 11-6.6-6.6 5.8 5.8 0 006.6 6.6z"/></svg>')`,
+      },
+      '& + .MuiSwitch-track': {
+        opacity: 1,
+        backgroundColor: theme.palette.mode === 'dark' ? '#8796A5' : '#aab4be',
+      },
+    },
+  },
+  '& .MuiSwitch-thumb': {
+    backgroundColor: theme.palette.mode === 'dark' ? '#003892' : '#001e3c',
+    width: 32,
+    height: 32,
+    '&:before': {
+      content: "''",
+      position: 'absolute',
+      width: '100%',
+      height: '100%',
+      left: 0,
+      top: 0,
+      backgroundRepeat: 'no-repeat',
+      backgroundPosition: 'center',
+      backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent(
+        '#fff',
+      )}" d="M9.305 1.667V3.75h1.389V1.667h-1.39zm-4.707 1.95l-.982.982L5.09 6.072l.982-.982-1.473-1.473zm10.802 0L13.927 5.09l.982.982 1.473-1.473-.982-.982zM10 5.139a4.872 4.872 0 00-4.862 4.86A4.872 4.872 0 0010 14.862 4.872 4.872 0 0014.86 10 4.872 4.872 0 0010 5.139zm0 1.389A3.462 3.462 0 0113.471 10a3.462 3.462 0 01-3.473 3.472A3.462 3.462 0 016.527 10 3.462 3.462 0 0110 6.528zM1.665 9.305v1.39h2.083v-1.39H1.666zm14.583 0v1.39h2.084v-1.39h-2.084zM5.09 13.928L3.616 15.4l.982.982 1.473-1.473-.982-.982zm9.82 0l-.982.982 1.473 1.473.982-.982-1.473-1.473zM9.305 16.25v2.083h1.389V16.25h-1.39z"/></svg>')`,
+    },
+  },
+  '& .MuiSwitch-track': {
+    opacity: 1,
+    backgroundColor: theme.palette.mode === 'dark' ? '#8796A5' : '#aab4be',
+    borderRadius: 20 / 2,
+  },
+}));
+
+
+export default function CustomizedSwitch() {
+  const { setTheme } = useContext(ThemeContext);
+
+
+  const handleChange = (e) => {
+    const isChecked = e.target.checked;
+    if (isChecked) {
+      setTheme(themeData.secondaryTheme)
+    } else {
+      setTheme(themeData.defaultTheme)
+    }
+  };
+
+
+  return (
+    <FormGroup>
+      <FormControlLabel
+        control={
+          <MaterialUISwitch 
+            sx={{ m: 1 }} 
+            //defaultChecked 
+            onChange={e => handleChange(e)}
+          />
+        }
+      />
+    </FormGroup>
+  );
+}
diff --git a/src/components/Navbar/Navbar.css b/src/components/Navbar/Navbar.css
@@ -34,6 +34,12 @@
     backdrop-filter: blur(20px) !important;
 }
 
+.switch-container {
+    position: absolute;
+    right: 90px;
+    top: 26px;
+}
+
 
 @media (max-width:1100px) {
     .navbar--container{
@@ -68,6 +74,9 @@
     .MuiDrawer-paper{
       border-radius: 0 !important;
     }
+    .switch-container {
+        right: 50px;
+    }
 }
 
 

diff --git a/src/components/Navbar/Navbar.js b/src/components/Navbar/Navbar.js
@@ -13,6 +13,7 @@ import CloseIcon from '@material-ui/icons/Close';
 import './Navbar.css';
 import { headerData } from '../../data/headerData';
 import { ThemeContext } from '../../contexts/ThemeContext';
+import CustomizedSwitch from './CustomizedSwitch';
 
 function Navbar() {
     const { theme, setHandleDrawer } = useContext(ThemeContext);
@@ -136,7 +137,9 @@ function Navbar() {
                 <h1 style={{ color: theme.secondary }}>
                     {shortname(headerData.name)}
                 </h1>
-
+                <div className='switch-container'>
+                    <CustomizedSwitch />    
+                </div>
                 <IoMenuSharp
                     className={classes.navMenu}
                     onClick={handleDrawerOpen}

diff --git a/src/contexts/ThemeContext.js b/src/contexts/ThemeContext.js
@@ -6,7 +6,7 @@ export const ThemeContext = createContext()
 
 function ThemeContextProvider(props) {
     // eslint-disable-next-line
-    const [theme, setTheme] = useState(themeData.theme)
+    const [theme, setTheme] = useState(themeData.defaultTheme)
     const [drawerOpen, setDrawerOpen] = useState(false)
 
     const setHandleDrawer = () => {
@@ -15,7 +15,7 @@ function ThemeContextProvider(props) {
 
 
 
-    const value = { theme, drawerOpen, setHandleDrawer }
+    const value = { theme, drawerOpen, setHandleDrawer, setTheme }
     return (
         <ThemeContext.Provider value={value}>
             {props.children}

diff --git a/src/data/themeData.js b/src/data/themeData.js
@@ -5,7 +5,8 @@ import {
 
 
 export const themeData = {
-    theme: orangeThemeDark
+    defaultTheme: orangeThemeLight,
+    secondaryTheme: orangeThemeDark
 }