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

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",
  },
};

2. Import ThemeProvider and createMuiTheme

import { ThemeProvider } from "@material-ui/core";
import { createMuiTheme } from "@material-ui/core/styles";

3. Set up the toggle logic

const [theme, setTheme] = useState(true);
const icon = !theme ?  : ; // Icons imported from `@material-ui/icons`
const appliedTheme = createMuiTheme(theme ? light : dark);

4. Wrap the render inside ThemeProvider and pass the appliedTheme

return //rest of the code;

5. 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.