Move useStyle inside TheProvider component

components/switch-theme.js

@@ -1,25 +1,45 @@
 import PropTypes from 'prop-types'
 import WbSunnyIcon from '@material-ui/icons/WbSunny'
 import Brightness3Icon from '@material-ui/icons/Brightness3'
+import {Box, makeStyles} from '@material-ui/core'
 
-export default function SwitchTheme({darkMode, setDarkMode}) {
+const useStyles = makeStyles({
+  switch: {
+    position: 'absolute',
+    right: '1em',
+    top: '95px',
+    zIndex: 1,
+    cursor: 'pointer'
+  },
+  switchFixed: {
+    position: 'fixed',
+    right: '1em',
+    top: '95px',
+    zIndex: 9990,
+    cursor: 'pointer'
+  }
+})
+
+export default function SwitchTheme({switchFixed, darkMode, setDarkMode}) {
+  const classes = useStyles()
   const handleClick = () => {
     localStorage.setItem('oki-dark', !darkMode)
     setDarkMode(!darkMode)
   }
 
   return (
-    <div>
+    <Box className={switchFixed ? classes.switchFixed : classes.switch}>
       {darkMode ? (
         <WbSunnyIcon onClick={handleClick} />
       ) : (
         <Brightness3Icon onClick={handleClick} />
       )}
-    </div>
+    </Box>
   )
 }
 
 SwitchTheme.propTypes = {
+  switchFixed: PropTypes.bool.isRequired,
   darkMode: PropTypes.bool.isRequired,
   setDarkMode: PropTypes.func.isRequired
 }