Update theme, dark mode and switch theme

components/switch-theme.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import {styled} from '@mui/material/styles'
-import WbSunnyIcon from '@mui/icons-material/WbSunny'
-import Brightness3Icon from '@mui/icons-material/Brightness3'
+import LightModeIcon from '@mui/icons-material/LightMode'
+import DarkModeIcon from '@mui/icons-material/DarkMode'
 import {Box} from '@mui/material'
 
 const PREFIX = 'switch-theme'
@@ -15,38 +15,40 @@ const StyledBox = styled(Box)({
   [`& .${classes.switch}`]: {
     position: 'absolute',
     right: '1em',
-    top: '200px',
+    top: '100px',
     zIndex: 1,
     cursor: 'pointer'
   },
   [`& .${classes.switchFixed}`]: {
     position: 'fixed',
     right: '1em',
-    top: '95px',
+    top: '90px',
     zIndex: 9990,
     cursor: 'pointer'
   }
 })
 
-export default function SwitchTheme({switchFixed, darkMode, setDarkMode}) {
-  const handleClick = () => {
-    localStorage.setItem('oki-dark', !darkMode)
-    setDarkMode(!darkMode)
+export default function SwitchTheme({switchFixed, mode, setMode}) {
+  const handleClick = seletedMode => {
+    localStorage.setItem('oki-theme', seletedMode)
+    setMode(seletedMode)
   }
 
   return (
-    <StyledBox className={switchFixed ? classes.switchFixed : classes.switch}>
-      {darkMode ? (
-        <WbSunnyIcon onClick={handleClick} />
-      ) : (
-        <Brightness3Icon onClick={handleClick} />
-      )}
+    <StyledBox>
+      <div className={switchFixed ? classes.switchFixed : classes.switch} >
+        {mode === 'dark' ? (
+          <LightModeIcon onClick={() => handleClick('light')} />
+        ) : (
+          <DarkModeIcon onClick={() => handleClick('dark')} />
+        )}
+      </div>
     </StyledBox>
   )
 }
 
 SwitchTheme.propTypes = {
   switchFixed: PropTypes.bool.isRequired,
-  darkMode: PropTypes.bool.isRequired,
-  setDarkMode: PropTypes.func.isRequired
+  mode: PropTypes.oneOf(['light', 'dark']),
+  setMode: PropTypes.func.isRequired
 }