Dark mode toggle with Material UI | React tutorial

In this short video we cover how to implement a dark mode toggle in your application with Material UI so that the user may switch between light mode and dark mode themes.
The github repository: github.com/Rid...
The technologies used in this video include, React and Typescript.

[@Hattrick249]

Ayeee thank you very much for this video and the source code! I was really struggling to hook up the color mode toggling functionality for my ts/react portfolio site and this made things so much easier to understand for me than reading the docs. It's working great now. you're awesome.

[@ridhwanio]

I’m glad to hear it! Thanks! :)

[@omkarpembarti7662]

Increase the font size

[@ridhwanio]

Thanks for the feedback, will keep it in mind for next time.

[@m3ow21]

What is the extension name for the colorful lines that guide for the selected line in your code?

[@piotrpodgorski7126]

It's not extention but native function of VScode, that is turned off by default. You can turn it on by clicking "settings" - the gear at bottom left of the window, then on the search bar, paste "editor.guides.bracketPairs" and set to "true" or "active".

[@francistrujillo2488]

please make your font bigger. cntrl + , zoom zoom level 3 add middle mouse wheel for vscode, thanks.

[@josefpohlmann2412]

Great tutorial! for some reason though, the colors it is using are the default colors that mui provides and I cannot implement my custom palette. any ideas?

[@ridhwanio]

Make sure the implementation for the memoized theme object is implemented correctly. You can also try the tokenisation approach from the last part of the video.

[@FryFryChickyChick]

Awesome video but brovva please zoom in your code, Im happy for you that you have big ass monitor but I have to throw away my eyes after that video

[@ridhwanio]

Hahaha thanks for the support, I’ve tried to rectify this in newer videos! 😂

[@wadethomas3736]

Thanks a lot great video. One question though, how do you make the dark mode persistent, if you refresh the page.

[@ridhwanio]

In your useColorTheme hook, everytime you toggle the colorMode, instead of just setting the state variable you should also store the value in local storage. Then you can have a useEffect to check the localStorage for value every time you reload the app, which will just live in the same hook and set the value in there.

[@wadethomas5984]

@@ridhwanio Ok thanks will try that

[@francistrujillo2488]

Bigger font please.

[@sonjasviden963]

Hi! I can't seem to make it actually toggle.. It's there in my navbar but I can't make the theme switch. I have multiple pages so therefore I don't have an App component, although I do have a Navbar component that I have included the code you put in your App component. So what have I missed? 😩 Do I need to put something in my index.tsx or what could be missing?

[@ridhwanio]

Where did you place the context and the logic around that? If you don’t have an App component I would suggest to create one put all your pages in it or add the Context to your index.tsx file.

[@ridhwanio]

Also make sure you have the too as that is important for dark mode to work.

[@alanmurray4011]

Thanks for the video 🙏Any idea how to implement this when using React Router? Can't get it to work. Everything adapts to the new mode except for text and the background-color and I have included the . I have the ThemeContext.provider in the main.tsx file and the MUI in my main component which is my main element defined in my router. When I access the ThemeContext in my component and console.log the value, it re-renders as expected when my toggle button changes the mode and the new value is also as expected in the console. Most elements like my MUI inputs change to reflect the new color mode but the background and text don't change 🫤

[@ridhwanio]

Is the CssBaseline in your Layout.tsx? If so I would change it and put it inside the main.tsx. It’s the CssBaseline that effects background colour, so I assume the placement of that is causing the issue. Make sure it’s above your main app elements too.

[@alanmurray4011]

@@ridhwanio I tried every variation of putting one or both of the CssBaseline and the Mui ThemeProvider in just the layout.tsx or just the main.tsx and both, but the result is either the same or it doesn't work at all. I'm calling the useContext hook to get the current theme in my layout.tsx which is where I also have my Mui ThemeProvider since I need to pass it the theme. Should the Mui ThemeProvider be instead in the main.tsx file and if so, how do I give it access to the theme from the Context hook since I can't call the hook there? Thanks for your help.

[@ridhwanio]

@@alanmurray4011 Hey, you can put the ThemeProvider in the main.tsx file but would have to convert the code into a FunctionComponent and render that. I'd say instead of that, create an App.tsx file and set up your ThemeProvider in there with the context. Setup all other providers in the main.tsx file and then everything else render (including the Layout) within the ThemeProvider in your App.tsx file. If you're still struggling with it, feel free to reach out to me on twitter @ridhwanio and I will happily try to help further!

[@ravenblue991]

Thank you

[@vanhelsingx69x]

why it's so pixelated

[@rizwansetiawan7972]

not global, when reaload page is back to default ;(

[@ridhwanio]

I think you mean it's not persistent, you can do this by saving it in local storage. In your useColorTheme hook, everytime you toggle the colorMode, instead of just setting the state variable you should also store the value in local storage. Then you can have a useEffect to check the localStorage for value every time you reload the app, which will just live in the same hook and set the value in there.