import React , { memo } from 'react' ; import IconButton from '@material-ui/core/IconButton' ; import Brightness4Icon from '@material-ui/icons/Brightness4' ; import Brightness7Icon from '@material-ui/icons/Brightness7' ; import { THEMES } from 'configs' ; import { useGlobalContext } from 'context/GlobalContext' ; function DarkMode ( ) { const { modeTheme , setModeTheme } = useGlobalContext ( ) ; const _handleChangeTheme = ( ) => { const type = modeTheme === THEMES . LIGHT ? THEMES . DARK : THEMES . LIGHT ; setModeTheme ( type ) ; } ; return ( < IconButton aria - label = "account of current user" aria - controls = "menu-appbar" aria - haspopup = "true" color = "inherit" title = "Change Theme" onClick = { _handleChangeTheme } > { modeTheme === THEMES . LIGHT ? < Brightness4Icon /> : <Brightness7Icon / > } < /IconButton>); } export default memo ( DarkMode ) ;