title: Toggle Dark Mode with React, Next JS & Local Storage using MUI V5 Latest Version
body: <p>Currently, I am developing a Web app built with <code>NEXT JS</code> and <code>MUI 5</code> latest version alongside using <code>GraphQL</code>.</p>
  <p><strong>I am stacked with this point:</strong></p>
  <p>I do want to persistent the changing dark mode inside the LocalStorage alongside using this implementation of MUI guidelines by &quot;<a href="https://mui.com/customization/dark-mode/#toggling-color-mode" rel="nofollow noreferrer">https://mui.com/customization/dark-mode/#toggling-color-mode</a>&quot;.</p>
  <p><a href="https://i.stack.imgur.com/7qdB0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7qdB0.png" alt="enter image description here" /></a></p>
  <blockquote>
  <p>Is there anyone who can guide me through if I toggle the switch then the Dark or Light mode gonna set in the localStorage? I need all your suggestions.</p>
  </blockquote>
  <p><strong>I am Using with Context API</strong>:</p>
  <pre><code>import { createContext, useMemo, useState } from 'react'
  import { createTheme, ThemeProvider } from '@mui/material/styles'
  
  // TODO: Export this one
  export const ColorModeContext = createContext({ toggleColorMode: () =&gt; {} })
  
  const ThemeContext = ({ children }) =&gt; {
      const [mode, setMode] = useState('dark')
  
      const colorMode = useMemo(
          () =&gt; ({
              toggleColorMode: () =&gt; {
                  setMode((prevMode) =&gt; (prevMode === 'light' ? 'dark' : 'light'))
              },
          }),
          []
      )
  
      const theme = useMemo(
          () =&gt;
              createTheme({
                  palette: {
                      mode,
                      primary: {
                          light: '#757ce8',
                          main: '#3f50b5',
                          dark: '#002884',
                          contrastText: '#fff',
                      },
                      secondary: {
                          light: '#ff7961',
                          main: '#f44336',
                          dark: '#ba000d',
                          contrastText: '#000',
                      },
                  },
              }),
          [mode]
      )
  
      return (
          &lt;ColorModeContext.Provider value={colorMode}&gt;
              &lt;ThemeProvider theme={theme}&gt;{children}&lt;/ThemeProvider&gt;
          &lt;/ColorModeContext.Provider&gt;
      )
  }
  
  export default ThemeContext
  
  </code></pre>
  <p><strong>I implemented in my AppBar stuff like this</strong>:</p>
  <pre><code>// * ___main_appbar_function___
  export default function MyAppBar(props) {
      const theme = useTheme()
      const colorMode = useContext(ColorModeContext)
  
      return (
          &lt;NoSsr&gt;
              &lt;CssBaseline /&gt;
              &lt;HideOnScroll {...props}&gt;
                  &lt;AppBar color='inherit'&gt;
                      &lt;Toolbar variant='dense' component='div'&gt;
                          &lt;Box sx={root}&gt;
                              &lt;MySideBar /&gt;
                              &lt;Typography component='div' variant='h5' textAlign='center'&gt;
                                  PJK
                              &lt;/Typography&gt;
                              &lt;Box sx={right}&gt;
                                  {/* &lt;AuthModal /&gt; */}
                                  &lt;motion.div
                                      whileTap={{ rotate: 360 }}
                                      // whileHover={{ rotate: 360 }}
                                      transition={{ type: 'spring', stiffness: 50 }}
                                  &gt;
                                      &lt;IconButton onClick={refreshPage}&gt;
                                          &lt;RotateRightIcon /&gt;
                                      &lt;/IconButton&gt;
                                  &lt;/motion.div&gt;
  
                                  &lt;IconButton
                                      sx={{ ml: 1 }}
                                      onClick={colorMode.toggleColorMode}
                                      color='inherit'
                                  &gt;
                                      {theme.palette.mode === 'dark' ? (
                                          &lt;Brightness7Icon /&gt;
                                      ) : (
                                          &lt;Brightness4Icon /&gt;
                                      )}
                                  &lt;/IconButton&gt;
                              &lt;/Box&gt;
                          &lt;/Box&gt;
                      &lt;/Toolbar&gt;
                  &lt;/AppBar&gt;
              &lt;/HideOnScroll&gt;
              &lt;Toolbar /&gt;
          &lt;/NoSsr&gt;
      )
  }
  </code></pre>