Update theme, dark mode and switch theme

pages/_app.js

@@ -1,28 +1,49 @@
 import {useEffect, useMemo, useState} from 'react'
 import {useRouter} from 'next/router'
 import PropTypes from 'prop-types'
-import {createTheme, ThemeProvider, StyledEngineProvider, adaptV4Theme} from '@mui/material/styles'
+import {createTheme, ThemeProvider, StyledEngineProvider} from '@mui/material/styles'
 import CssBaseline from '@mui/material/CssBaseline'
 import {Provider, useSession} from 'next-auth/client'
 
+import {grey, green, red} from '@mui/material/colors'
 import SwitchTheme from '../components/switch-theme'
 
+const getDesignTokens = mode => ({
+  palette: {
+    mode,
+    ...(mode === 'light'
+      ? {
+        // Palette values for light mode
+        primary: green,
+        secondary: red,
+        divider: green[200],
+        text: {
+          primary: grey[900],
+          secondary: grey[800],
+        },
+      }
+      : {
+        // Palette values for dark mode
+        primary: green,
+        secondary: red,
+        divider: green[700],
+        background: {
+          default: '#082211',
+          paper: '#082211',
+        },
+        text: {
+          primary: '#fff',
+          secondary: grey[100],
+        },
+      }),
+  },
+})
+
 export default function MyApp(props) {
   const {Component, pageProps} = props
-  const [darkMode, setDarkMode] = useState(false)
+  const [mode, setMode] = useState('light')
   const [switchFixed, setSwitchFixed] = useState(false)
-
-  const darkTheme = useMemo(() => createTheme(adaptV4Theme({
-    palette: {
-      mode: darkMode ? 'dark' : 'light',
-      primary: {
-        light: '#81c784',
-        main: '#4caf50',
-        dark: '#388e3c',
-        contrastText: '#fff'
-      }
-    }
-  })), [darkMode])
+  const theme = useMemo(() => createTheme(getDesignTokens(mode)), [mode])
 
   useEffect(() => {
     const jssStyles = document.querySelector('#jss-server-side')
@@ -40,20 +61,25 @@ export default function MyApp(props) {
   }, [props])
 
   useEffect(() => {
-    const dark = localStorage.getItem('oki-dark')
-    if (dark === 'false') {
-      setDarkMode(false)
+    const oldLocalMode = localStorage.getItem('oki-dark')
+    const localMode = localStorage.getItem('oki-theme')
+    if (localMode === 'dark' || (oldLocalMode && oldLocalMode === 'true')) {
+      setMode('dark')
     } else {
-      setDarkMode(true)
+      setMode('light')
+    }
+
+    if (localMode && oldLocalMode) {
+      localStorage.removeItem('oki-dark')
     }
   }, [])
 
   return (
     <StyledEngineProvider injectFirst>
-      <ThemeProvider theme={darkTheme}>
+      <ThemeProvider theme={theme}>
         <CssBaseline />
         <Provider session={pageProps.session}>
-          <SwitchTheme switchFixed={switchFixed} darkMode={darkMode} setDarkMode={setDarkMode} />
+          <SwitchTheme switchFixed={switchFixed} mode={mode} setMode={setMode} />
           {Component.auth ? (
             <Auth><Component {...pageProps} /></Auth>
           ) : (