diff --git a/app/theme-registy.js b/app/theme-registy.js
index 70332c8..8fe8547 100644
--- a/app/theme-registy.js
+++ b/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: {
diff --git a/components/footer.js b/components/footer.js
index b26d02c..0d205b2 100644
--- a/components/footer.js
+++ b/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}`]: {