Material UI | How to easily set up dark theme toggle in React

187 Words
Views

Scaffold React Application#

A new react app is easily scaffolded using

npx create-react-app my-app

Install dependencies#

I need to install material ui core package.

// with npm
$ npm install @material-ui/core

// with yarn
$ yarn add @material-ui/core

Wrap application in Theme Provider#

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

  1. Add Light and Dark themes
export const light = {
  palette: {
    type: 'light',
  },
}
export const dark = {
  palette: {
    type: 'dark',
  },
}
  1. Import ThemeProvider and createMuiTheme
import { ThemeProvider } from '@material-ui/core'
import { createMuiTheme } from '@material-ui/core/styles'
  1. 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)
  1. Wrap the render inside ThemeProvider and pass the appliedTheme
return <ThemeProvider theme={appliedTheme}>//rest of the code</ThemeProvider>
  1. Trigger toggle using onClick
onClick={() => setTheme(!theme)}

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.




If you enjoyed this blog post, please


© 2020 - 2023 Aditya Naik