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 technologies used in this video include, React and Typescript.

[Hattrick]

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.

[mow]

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

[josefpohlmann]

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?

[francistrujillo]

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

[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

[sonjasviden]

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?

[wadethomas]

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

[alanmurray]

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 <CssBaseline>. I have the ThemeContext.provider in the main.tsx file and the MUI <ThemeProvider> in my main <Layout /> component which is my main element defined in my router. When I access the ThemeContext in my <Layout> 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 🫤

[rizwansetiawan]

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