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.
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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!