Menu
In this blog you are going to learn how to create a toggle button that switches between light and dark theme.

Easily toggle between light and dark theme with Material-UI

In this blog you are going to learn how to create a toggle button that switches between light and dark theme.

I have already created a video about it on my youtube channel. Check that out.

We know that in dark mode, the background stays dark and the foreground is white to keep the contrast. In light mode, it is just the opposite. So, we need a component that automatically changes its background color based on the theme. Also for the text.

In Material-ui, we have a component like that. That is the Paper component. The Paper component is intelligent enough to automatically detect the theme and it will change its background color. For more information, please check their docs out. Paper

  • Let's create a boilerplate component.
1import React from 'react'
2

3const DarkTheme = (props) => {
4    return (
5        <div>
6            
7        </div>
8    )
9}
10

11export default DarkTheme
  • Create a new state with useState hook.
1import React, {useState} from 'react'
2

3const DarkTheme = (props) => {
4    const [dark, setDark] = useState(false)
5    return (
6        <div>
7            
8        </div>
9    )
10}
11

12export default DarkTheme

This will be used for checking if the current mode is in dark or not.

  • Create a new theme.
1import React, {useState} from 'react'
2import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'
3

4const DarkTheme = (props) => {
5    const [dark, setDark] = useState(false)
6

7    const theme = createMuiTheme({
8        palette: {
9            type: dark ? 'dark' : 'light',
10        },
11    })
12

13    return (
14        <div>
15            
16        </div>
17    )
18}
19

20export default DarkTheme

Simply we specify the theme mode by the type property. In this case, it will be updated based on the dark state value. We will use a button to manipulate the state.

  • Insert a paper with the Typography component.
1import React, { useState } from 'react'
2import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'
3import Typography from '@material-ui/core/Typography'
4import Paper from '@material-ui/core/Paper'
5

6const DarkTheme = () => {
7    const [dark, setDark] = useState(false)
8

9    const theme = createMuiTheme({
10        palette: {
11            type: dark ? 'dark' : 'light',
12        },
13    })
14

15    return (
16            <Paper>
17                <Typography variant='h1'>This is a h1 text</Typography>
18

19                <Typography variant='body2'>This is a body2 text</Typography>
20            </Paper>
21    )
22}
23

24export default DarkTheme
  • Wrap all components by the ThemeProvider and pass the theme object as a theme prop. 
1import React, { useState } from 'react'
2import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'
3import Typography from '@material-ui/core/Typography'
4import Paper from '@material-ui/core/Paper'
5

6const DarkTheme = () => {
7    const [dark, setDark] = useState(false)
8

9    const theme = createMuiTheme({
10        palette: {
11            type: dark ? 'dark' : 'light',
12        },
13    })
14

15    return (
16        <ThemeProvider theme={theme}>
17            <Paper>
18                <Typography variant='h1'>This is a h1 text</Typography>
19

20                <Typography variant='body2'>This is a body2 text</Typography>
21            </Paper>
22        </ThemeProvider>
23    )
24}
25

26export default DarkTheme

If you have no idea about theming in material-ui, then please check this video out.

ThemeProvider is making our custom theme available to all the children. It is like redux and context API.

But we still don't have the toggle functionality. We need a switch component

  • Insert a switch component or any other button-type component that can be togglable.
1import React, { useState } from 'react'
2import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'
3import Typography from '@material-ui/core/Typography'
4import Paper from '@material-ui/core/Paper'
5import Switch from '@material-ui/core/Switch'
6

7const DarkTheme = () => {
8    const [dark, setDark] = useState(false)
9

10    const theme = createMuiTheme({
11        palette: {
12            type: dark ? 'dark': 'light',
13        },
14    })
15

16    return (
17        <ThemeProvider theme={theme}>
18            <Switch checked={dark} onChange={() => setDark(!dark)} />
19            <Paper>
20                <Typography variant='h1'>This is a h1 text</Typography>
21

22                <Typography variant='body2'>This is a body2 text</Typography>
23            </Paper>
24        </ThemeProvider>
25    )
26}
27

28export default DarkTheme

Every time you click on the switch button, the dark state will be changed to its opposite value. This will toggle the theme type.

  • Switch off.

  • Switch on.

How is it working?

The Paper component has a white Background color and dark font color. And Typography component by default inherits the font color from its parent. In this case, it is the Paper component. When the theme type is changed, Paper is intelligent enough to detect the change. It will invert the color to keep the contrast between foreground and background color.

So, This is how it works. Isn't it so easy?

Shameless Plug

I have made a video about how to build a carousel postcard with React, Material-UI, and Swiper.js. If you are interested you can check the video.

You can also demo the application form here

Please like and subscribe to Cules Coding. It motivates me to create more content like this.

If you have any questions, feel free to contact me on any social media as @thatanjan. Stay safe. Goodbye.

About me

Why do I do what I do?

The Internet has revolutionized our life. I want to make the internet more beautiful and useful.

What do I do?

I ended up being a full-stack software engineer.

What can I do?

I can develop complex full-stack web applications like social media applications or e-commerce sites.

What have I done?

I have developed a social media application called Confession. The goal of this application is to help people overcome their imposter syndrome by sharing our failure stories. I also love to share my knowledge. So, I run a youtube channel called Cules Coding where I teach people full-stack web development, data structure algorithms, and many more. So, Subscribe to Cules Coding so that you don't miss the cool stuff.

Want to work with me?

I am looking for a team where I can show my ambition and passion and produce great value for them. Contact me through my email or any social media as @thatanjan. I would be happy to have a touch with you.

Contacts

Blogs you might want to read:

Videos might you might want to watch:

Shameless Plug

I have made an Xbox landing page clone with React and Styled components. I hope you will enjoy it. Please consider like this video and subscribe to my channel.

That's it for this blog. I have tried to explain things simply. If you get stuck, you can ask me questions.

Contacts

Blogs you might want to read:

Videos might you might want to watch:

Previous Post7 reasons why you should use SWR
Next PostWhat is CSS in JS?