DEV Community

Suraj Sharma
Suraj Sharma

Posted on

7

How to build a dark mode theme using React Material UI, React context API and React hooks

This article is about creating your own 'ThemeProvider' component to toggle between the light mode and dark mode built using React Context API and React hooks useMemo() and useCallback() even created a new custom hook useChangeTheme()

I recently added a button to toggle between light mode and dark mode on my personal blog, for that I created a separate library called 'react-material-ui-dark-mode'

If you're interested in reading more about how to build own your toggle button or want to use my library in your projects.

Follow my blog post on my personal website or you can fork the GitHub repository react-material-ui-dark-mode

Please leave your feedback on the comment box below.

Thank You!

Top comments (0)

Image of PulumiUP 2025

Let's talk about the current state of cloud and IaC, platform engineering, and security.

Dive into the stories and experiences of innovators and experts, from Startup Founders to Industry Leaders at PulumiUP 2025.

Register Now

👋 Kindness is contagious

Engage with a wealth of insights in this thoughtful article, valued within the supportive DEV Community. Coders of every background are welcome to join in and add to our collective wisdom.

A sincere "thank you" often brightens someone’s day. Share your gratitude in the comments below!

On DEV, the act of sharing knowledge eases our journey and fortifies our community ties. Found value in this? A quick thank you to the author can make a significant impact.

Okay