TheLazy.Dev
Portfolio GitHub

Blog

react |materialui |darkmode |lightmode

How to easily set up Material UI theme toggle in React

full_stack_adi

Aditya

Posted on June 20, 2020

How to easily set up Material UI theme toggle in React

Scaffold React Application

A new react app is easily scaffolded using


$ npx create-react-app my-app
Enter fullscreen mode Exit fullscreen mode

Install dependencies

I need to install material ui core package.


// with npm

$ npm install @material-ui/core



// with yarn

$ yarn add @material-ui/core
Enter fullscreen mode Exit fullscreen mode

Wrap application in Theme Provider

For the purpose of this demo, I will use App.js to set up everything.

  • Add Light and Dark themes 

export const light = {

  palette: {

  type: 'light',

  },

}

export const dark = {

  palette: {

  type: 'dark',

  },

}
Enter fullscreen mode Exit fullscreen mode
  • Import ThemeProvider and createMuiTheme 

import { ThemeProvider } from '@material-ui/core'

import { createMuiTheme } from '@material-ui/core/styles'
Enter fullscreen mode Exit fullscreen mode
  • Set up the toggle logic 

const [theme, setTheme] = useState(true)

const icon = !theme ? <Brightness7Icon /> : <Brightness3Icon /> 
// Icons imported from `@material-ui/icons`

const appliedTheme = createMuiTheme(theme ? light : dark)
Enter fullscreen mode Exit fullscreen mode
  • Wrap the render inside ThemeProvider and pass the appliedTheme 

return (

 <ThemeProvider theme={appliedTheme}>

 //rest of the code

 </ThemeProvider>

)
Enter fullscreen mode Exit fullscreen mode
  • Trigger toggle using onClick 

 onClick={() => setTheme(!theme)}
Enter fullscreen mode Exit fullscreen mode

Now our theme toggle logic is in place.

Add rest of the material ui components and see the toggle in action!

You can see a working example here, along with the code.

💖 💪 🙅 🚩
full_stack_adi
Aditya

Posted on June 20, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

How to easily set up Material UI theme toggle in React
react How to easily set up Material UI theme toggle in React

June 20, 2020