Fix toggle theme

app/theme-registy.js

@@ -1,7 +1,7 @@
 'use client'
 
 import PropTypes from 'prop-types'
-import {extendTheme, ThemeProvider} from '@mui/material/styles'
+import {createTheme, ThemeProvider} from '@mui/material/styles'
 import InitColorSchemeScript from '@mui/material/InitColorSchemeScript'
 import CssBaseline from '@mui/material/CssBaseline'
 
@@ -17,7 +17,7 @@ import PlausibleProvider from 'next-plausible'
 import ChanjeTem from '../components/chanje-tem'
 import NextAppDirEmotionCacheProvider from './emotion-cache-provider'
 
-const theme = extendTheme({
+const theme = createTheme({
   colorSchemes: {
     light: {
       palette: {

components/footer.js

@@ -30,9 +30,9 @@ const Root = styled('div')((
     padding: theme.spacing(1, 2),
     marginTop: 'auto',
     backgroundColor: theme.palette.grey[100],
-    [theme.getColorSchemeSelector('dark')]: {
+    ...theme.applyStyles('dark', {
       backgroundColor: '#1E3526'
-    }
+    })
   },
 
   [`& .${classes.text}`]: {