58 lines
1.4 KiB
JavaScript
58 lines
1.4 KiB
JavaScript
|
'use client'
|
||
|
|
|
||
|
|
import {useContext} from 'react'
|
||
|
|
import {styled, useTheme} from '@mui/material/styles'
|
||
|
|
import LightModeIcon from '@mui/icons-material/LightMode'
|
||
|
|
import DarkModeIcon from '@mui/icons-material/DarkMode'
|
||
|
|
import {Box} from '@mui/material'
|
||
|
|
import {usePathname} from 'next/navigation'
|
||
|
|
import {ColorModeContext} from '../app/theme-registy'
|
||
|
|
|
||
|
|
const PREFIX = 'chanje-tem'
|
||
|
|
|
||
|
|
const klas = {
|
||
|
|
chanje: `${PREFIX}-chanje`,
|
||
|
|
chanjeFiks: `${PREFIX}-chanjeFiks`
|
||
|
|
}
|
||
|
|
|
||
|
|
const StyledBox = styled(Box)({
|
||
|
|
[`& .${klas.chanje}`]: {
|
||
|
|
position: 'absolute',
|
||
|
|
right: '1em',
|
||
|
|
top: '60px',
|
||
|
|
zIndex: 1,
|
||
|
|
cursor: 'pointer'
|
||
|
|
},
|
||
|
|
[`& .${klas.chanjeFiks}`]: {
|
||
|
|
position: 'fixed',
|
||
|
|
right: '0.5em',
|
||
|
|
top: '68px',
|
||
|
|
zIndex: 2,
|
||
|
|
cursor: 'pointer'
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
export default function ChanjeTem() {
|
||
|
|
const colorMode = useContext(ColorModeContext)
|
||
|
|
const theme = useTheme()
|
||
|
|
const pathname = usePathname()
|
||
|
|
const selectedPath = pathname === '/' ? 'akey' : pathname.split('/')[1]
|
||
|
|
|
||
|
|
const jereClik = seletedMode => {
|
||
|
|
colorMode.toggleColorMode()
|
||
|
|
localStorage.setItem('oki-tem', seletedMode)
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<StyledBox>
|
||
|
|
<div className={selectedPath === 'paroles' ? klas.chanjeFiks : klas.chanje} >
|
||
|
|
{theme.palette.mode === 'dark' ? (
|
||
|
|
<LightModeIcon onClick={() => jereClik('light')} />
|
||
|
|
) : (
|
||
|
|
<DarkModeIcon onClick={() => jereClik('dark')} />
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</StyledBox>
|
||
|
|
)
|
||
|
|
}
|