Theme Switcher using chakra UI

Photo by Walling on Unsplash

I love dark mode and I think so does everybody else.

However, I really struggled adding a dark mode feature using Material UI in the past because you have to create a custom hook like useDarkMode or something.

Of course, there were a bunch of articles explaining how to build theme switcher, but I remember it did not work just copy & paste the code and had to make small changes to make it work.

Now I use chakra UI, and it makes it so much easier to build a theme switcher compared to Material UI. I built a theme switcher as follows:

The chakra UI’s built-in hook, useColorMode does pretty much everything. You don’t have to pass theme to child components by context api or save user’s preferences on local storage because the hook does it for you.

Color Mode

Demo

Theme Switcher Demo

I hope this helps. Thank you for reading 😀