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 {createTheme, ThemeProvider} from '@mui/material/styles'
+import {experimental_extendTheme as extendTheme, Experimental_CssVarsProvider as CssVarsProvider, getInitColorSchemeScript} 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 getDesignTokens = mode => ({
-  palette: {
-    mode,
-    ...(mode === 'light'
-      ? {
+const theme = extendTheme({
+  colorSchemes: {
+    light: {
+      palette: {
         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'}}>
-        <ColorModeContext.Provider value={colorMode}>
-          <ThemeProvider theme={theme}>
+    <>
+      {getInitColorSchemeScript()}
+      <PlausibleProvider domain='oki.re'>
+        <NextAppDirEmotionCacheProvider options={{key: 'mui'}}>
+          <CssVarsProvider theme={theme}>
             <CssBaseline enableColorScheme />
             <ChanjeTem />
             {children}
-          </ThemeProvider>
-        </ColorModeContext.Provider>
-      </NextAppDirEmotionCacheProvider>
-    </PlausibleProvider>
+          </CssVarsProvider>
+        </NextAppDirEmotionCacheProvider>
+      </PlausibleProvider>
+    </>
   )
 }