Improve ChanjeTem a fix dark-mode flickering

app/theme-registy.js

@@ -1,8 +1,7 @@
 'use client'
 
 import PropTypes from 'prop-types'
-import {useState, useMemo, useEffect, createContext} from 'react'
+import {experimental_extendTheme as extendTheme, Experimental_CssVarsProvider as CssVarsProvider, getInitColorSchemeScript} from '@mui/material/styles'
-import {createTheme, ThemeProvider} from '@mui/material/styles'
 import CssBaseline from '@mui/material/CssBaseline'
 
 import {grey, green, red, yellow} from '@mui/material/colors'
@@ -17,13 +16,10 @@ import PlausibleProvider from 'next-plausible'
 import ChanjeTem from '../components/chanje-tem'
 import NextAppDirEmotionCacheProvider from './emotion-cache-provider'
 
-export const ColorModeContext = createContext({toggleColorMode: () => {}})
+const theme = extendTheme({
-
+  colorSchemes: {
-const getDesignTokens = mode => ({
+    light: {
-  palette: {
+      palette: {
-    mode,
-    ...(mode === 'light'
-      ? {
         primary: green,
         secondary: red,
         divider: green[200],
@@ -35,7 +31,9 @@ const getDesignTokens = mode => ({
           secondary: grey[800],
         },
       }
-      : {
+    },
+    dark: {
+      palette: {
         primary: {
           main: yellow[500],
           contrastText: '#000'
@@ -47,58 +45,33 @@ const getDesignTokens = mode => ({
         divider: green[700],
         background: {
           default: '#082211',
-          paper: '#082211',
+          paper: '#082211'
         },
         text: {
           primary: '#fff',
-          secondary: grey[100],
+          secondary: grey[100]
-        },
+        }
-      }),
+      }
-  },
+    }
+  }
 })
 
 export default function ThemeRegistry(props) {
-  const [mode, setMode] = useState('light')
-  const colorMode = useMemo(
-    () => ({
-      toggleColorMode: () => {
-        setMode(prevMode =>
-          prevMode === 'light' ? 'dark' : 'light',
-        )
-      },
-    }),
-    [],
-  )
-  const theme = useMemo(() => createTheme(getDesignTokens(mode)), [mode])
-
   const {children} = props
 
-  useEffect(() => {
-    const vyeLokalMod = localStorage.getItem('oki-dark')
-    const lokalMod = localStorage.getItem('oki-tem')
-    if (lokalMod === 'dark' || (vyeLokalMod && vyeLokalMod === 'true')) {
-      setMode('dark')
-    } else {
-      setMode('light')
-    }
-
-    if (lokalMod && vyeLokalMod) {
-      localStorage.removeItem('oki-dark')
-    }
-  }, [])
-
   return (
-    <PlausibleProvider domain='oki.re'>
+    <>
-      <NextAppDirEmotionCacheProvider options={{key: 'mui'}}>
+      {getInitColorSchemeScript()}
-        <ColorModeContext.Provider value={colorMode}>
+      <PlausibleProvider domain='oki.re'>
-          <ThemeProvider theme={theme}>
+        <NextAppDirEmotionCacheProvider options={{key: 'mui'}}>
+          <CssVarsProvider theme={theme}>
             <CssBaseline enableColorScheme />
             <ChanjeTem />
             {children}
-          </ThemeProvider>
+          </CssVarsProvider>
-        </ColorModeContext.Provider>
+        </NextAppDirEmotionCacheProvider>
-      </NextAppDirEmotionCacheProvider>
+      </PlausibleProvider>
-    </PlausibleProvider>
+    </>
   )
 }
 

components/chanje-tem.js

@@ -1,12 +1,10 @@
 'use client'
 
-import {useContext} from 'react'
+import {styled, useColorScheme} from '@mui/material/styles'
-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'
 
@@ -33,23 +31,17 @@ const StyledBox = styled(Box)({
 })
 
 export default function ChanjeTem() {
-  const colorMode = useContext(ColorModeContext)
+  const {mode, setMode} = useColorScheme()
-  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' ? (
+        {mode === 'dark' ? (
-          <LightModeIcon onClick={() => jereClik('light')} />
+          <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:
+    backgroundColor: theme.palette.grey[100],
-      theme.palette.mode === 'light' ? theme.palette.grey[100] : '#1E3526'
+    [theme.getColorSchemeSelector('dark')]: {
+      backgroundColor: '#1E3526'
+    }
   },
 
   [`& .${classes.text}`]: {