Create a React Hook to Toggle Between Light and Dark Mode Inside of Material UI Themes

Thomas Greco

React

This video teaches users about the palette.type property Material UI uses when generating theme configuration objects. By default Material UI implements theme using light mode, however, we can change the look of our components by making palette.type equal to dark.

At the end of this lesson, you'll have created a custom hook that provides users the ability to toggle between light and dark mode when using Material UI themes.

Resources

Material UI Docs - Theming Customization

Material UI Docs

Code

You must be a Pro Member to view code

Access all courses and lessons, track your progress, gain confidence and expertise.

Become a Member
and unlock code for this lesson

orLog In

Discuss

Transcript

Thomas Greco: 0:04 On this page, we're just using this theme object with the createMuiTheme to generate our theme configuration.

0:16 Now, if we look inside of our theme config object, we'll notice that palette has a type property which, by default, is set to light. If we wanted to, we could change this value inside of our theme object by just specifying this as dark. As we can see, Material-UI is going to display the dark mode of our theme.

0:40 All right, so this is pretty cool. I think it's pretty cool. Let's keep it going so we can extend this ability to enable and disable dark mode to our users.

0:53 Below our theme object, I'm going to create the useDarkMode hook. The first thing I'll do here is just initialize this array with our theme value, as well as the setTheme function, and then we'll set that equal to useState, which will take the initial state of our theme object above.

1:15 We'll then be able to destructure our palette type off of our theme. Then we'll be able to use this to change the mode of our theme. Next, I'm just going to create this toggleDarkMode function. This is actually going to use the setTheme function for updating our state.

1:43 Above setTheme, I'm just going to paste in this object, updatedTheme. As you can see, we're spreading out the existing value of the theme to create a new object that has our existing values, and then we're going to modify our palette property with its existing values.

2:04 However, its type value will be dependent on this ternary statement. As you can see, this is just checking to see if the value is light. If it is, give it dark mode. If not, switch back to the type of light.

2:22 Finally, we'll pass an updated theme to our setTheme function. Then we're going to return an array with our theme value, as well as this toggleDarkMode function. Inside our app component, we'll be able to use this hook. Here, we'll just again say theme and toggleDarkMode. This time, we'll be grabbing them from the useDarkMode hook we just defined.

2:54 We're pretty much ready to go, but I'm going to import the switch and formControlLabel values from Material-UI and then add them to our app component. formControlLabel takes a control prop, which is where we'll pass in our switch.

3:14 Then we'll give the onClick prop of our switch that toggleDarkMode value. Let's modify our original theme object to have a value of light, just so we can start this off in the natural flow. Arguably, the most important thing I need to do is update our createMuiTheme function to use the theme we're grabbing off of our hook.

3:42 Otherwise, we'll just be retrieving the static themeConfig object each time. Here, if we reload, we'll see that our switch is indeed working, and we're able to toggle between light mode and dark mode with each click. Additionally, you'll see that our theme object is going to change its light and dark values as well.