Cédric FAMIBELLE-PRONZOLA
46 lines
1.0 KiB
JavaScript
46 lines
1.0 KiB
JavaScript
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'
|
|
|
|
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 (
|
|
<Box className={switchFixed ? classes.switchFixed : classes.switch}>
|
|
{darkMode ? (
|
|
<WbSunnyIcon onClick={handleClick} />
|
|
) : (
|
|
<Brightness3Icon onClick={handleClick} />
|
|
)}
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
SwitchTheme.propTypes = {
|
|
switchFixed: PropTypes.bool.isRequired,
|
|
darkMode: PropTypes.bool.isRequired,
|
|
setDarkMode: PropTypes.func.isRequired
|
|
}
|