Update theme, dark mode and switch theme

components/switch-theme.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import {styled} from '@mui/material/styles'
-import WbSunnyIcon from '@mui/icons-material/WbSunny'
+import LightModeIcon from '@mui/icons-material/LightMode'
-import Brightness3Icon from '@mui/icons-material/Brightness3'
+import DarkModeIcon from '@mui/icons-material/DarkMode'
 import {Box} from '@mui/material'
 
 const PREFIX = 'switch-theme'
@@ -15,38 +15,40 @@ const StyledBox = styled(Box)({
   [`& .${classes.switch}`]: {
     position: 'absolute',
     right: '1em',
-    top: '200px',
+    top: '100px',
     zIndex: 1,
     cursor: 'pointer'
   },
   [`& .${classes.switchFixed}`]: {
     position: 'fixed',
     right: '1em',
-    top: '95px',
+    top: '90px',
     zIndex: 9990,
     cursor: 'pointer'
   }
 })
 
-export default function SwitchTheme({switchFixed, darkMode, setDarkMode}) {
+export default function SwitchTheme({switchFixed, mode, setMode}) {
-  const handleClick = () => {
+  const handleClick = seletedMode => {
-    localStorage.setItem('oki-dark', !darkMode)
+    localStorage.setItem('oki-theme', seletedMode)
-    setDarkMode(!darkMode)
+    setMode(seletedMode)
   }
 
   return (
-    <StyledBox className={switchFixed ? classes.switchFixed : classes.switch}>
+    <StyledBox>
-      {darkMode ? (
+      <div className={switchFixed ? classes.switchFixed : classes.switch} >
-        <WbSunnyIcon onClick={handleClick} />
+        {mode === 'dark' ? (
-      ) : (
+          <LightModeIcon onClick={() => handleClick('light')} />
-        <Brightness3Icon onClick={handleClick} />
+        ) : (
-      )}
+          <DarkModeIcon onClick={() => handleClick('dark')} />
+        )}
+      </div>
     </StyledBox>
   )
 }
 
 SwitchTheme.propTypes = {
   switchFixed: PropTypes.bool.isRequired,
-  darkMode: PropTypes.bool.isRequired,
+  mode: PropTypes.oneOf(['light', 'dark']),
-  setDarkMode: PropTypes.func.isRequired
+  setMode: PropTypes.func.isRequired
 }

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 theme = useMemo(() => createTheme(getDesignTokens(mode)), [mode])
-  const darkTheme = useMemo(() => createTheme(adaptV4Theme({
-    palette: {
-      mode: darkMode ? 'dark' : 'light',
-      primary: {
-        light: '#81c784',
-        main: '#4caf50',
-        dark: '#388e3c',
-        contrastText: '#fff'
-      }
-    }
-  })), [darkMode])
 
   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')
+    const oldLocalMode = localStorage.getItem('oki-dark')
-    if (dark === 'false') {
+    const localMode = localStorage.getItem('oki-theme')
-      setDarkMode(false)
+    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>
           ) : (