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>
+  )
+}

components/switch-theme.js

@@ -1,54 +0,0 @@
-import PropTypes from 'prop-types'
-import {styled} from '@mui/material/styles'
-import LightModeIcon from '@mui/icons-material/LightMode'
-import DarkModeIcon from '@mui/icons-material/DarkMode'
-import {Box} from '@mui/material'
-
-const PREFIX = 'switch-theme'
-
-const classes = {
-  switch: `${PREFIX}-switch`,
-  switchFixed: `${PREFIX}-switchFixed`
-}
-
-const StyledBox = styled(Box)({
-  [`& .${classes.switch}`]: {
-    position: 'absolute',
-    right: '1em',
-    top: '60px',
-    zIndex: 1,
-    cursor: 'pointer'
-  },
-  [`& .${classes.switchFixed}`]: {
-    position: 'fixed',
-    right: '0.5em',
-    top: '68px',
-    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' ? (
-          <LightModeIcon onClick={() => handleClick('light')} />
-        ) : (
-          <DarkModeIcon onClick={() => handleClick('dark')} />
-        )}
-      </div>
-    </StyledBox>
-  )
-}
-
-SwitchTheme.propTypes = {
-  switchFixed: PropTypes.bool.isRequired,
-  mode: PropTypes.oneOf(['light', 'dark']),
-  setMode: PropTypes.func.isRequired
-}