Rename SwitchTheme to ChanjeTem

components/chanje-tem.js

@@ -0,0 +1,57 @@
+'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>
+  )
+}