Improve ChanjeTem a fix dark-mode flickering

components/chanje-tem.js

@@ -1,12 +1,10 @@
 'use client'
 
-import {useContext} from 'react'
-import {styled, useTheme} from '@mui/material/styles'
+import {styled, useColorScheme} 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'
 
@@ -33,23 +31,17 @@ const StyledBox = styled(Box)({
 })
 
 export default function ChanjeTem() {
-  const colorMode = useContext(ColorModeContext)
-  const theme = useTheme()
+  const {mode, setMode} = useColorScheme()
   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')} />
+        {mode === 'dark' ? (
+          <LightModeIcon onClick={() => setMode(mode === 'light' ? 'dark' : 'light')} />
         ) : (
-          <DarkModeIcon onClick={() => jereClik('dark')} />
+          <DarkModeIcon onClick={() => setMode(mode === 'light' ? 'dark' : 'light')} />
         )}
       </div>
     </StyledBox>

components/footer.js

@@ -29,8 +29,10 @@ const Root = styled('div')((
   [`& .${classes.footer}`]: {
     padding: theme.spacing(1, 2),
     marginTop: 'auto',
-    backgroundColor:
-      theme.palette.mode === 'light' ? theme.palette.grey[100] : '#1E3526'
+    backgroundColor: theme.palette.grey[100],
+    [theme.getColorSchemeSelector('dark')]: {
+      backgroundColor: '#1E3526'
+    }
   },
 
   [`& .${classes.text}`]: {