pawol.nu/components/switch-theme.js

import PropTypes from 'prop-types'
import Image from 'next/image'
import {styled} from '@mui/material/styles'
import {Box} from '@mui/material'

import lightSwitch from '../public/theme-switch/light.png'
import darkSwitch from '../public/theme-switch/dark.png'

const PREFIX = 'switch-theme'

const classes = {
  switch: `${PREFIX}-switch`,
  switchFixed: `${PREFIX}-switchFixed`
}

const StyledBox = styled(Box)({
  [`& .${classes.switch}`]: {
    position: 'absolute',
    right: '1em',
    top: '100px',
    zIndex: 1,
    cursor: 'pointer'
  },
  [`& .${classes.switchFixed}`]: {
    position: 'fixed',
    right: '1em',
    top: '90px',
    zIndex: 9990,
    cursor: 'pointer'
  }
})

export default function SwitchTheme({switchFixed, mode, setMode}) {
  const handleClick = seletedMode => {
    localStorage.setItem('oki-theme', seletedMode)
    setMode(seletedMode)
  }

  return (
    <StyledBox>
      <div className={switchFixed ? classes.switchFixed : classes.switch} >
        {mode === 'dark' ? (
          <Image
            alt='Logo #OKi'
            width={24}
            height={24}
            src={darkSwitch}
            quality={10}
            onClick={() => handleClick('light')}
          />
        ) : (
          <Image
            alt='Logo #OKi'
            width={24}
            height={24}
            src={lightSwitch}
            quality={10}
            onClick={() => handleClick('dark')}
          />
        )}
      </div>
    </StyledBox>
  )
}

SwitchTheme.propTypes = {
  switchFixed: PropTypes.bool.isRequired,
  mode: PropTypes.oneOf(['light', 'dark']),
  setMode: PropTypes.func.isRequired
}