React Material UI Dark Mode

Creating a React Application that uses Material UI to render in a Dark Mode

Andrew Bliss
Feb 5 · 4 min read

With the dawn of the internet, people have always gone blind opening up apps, whether it be on a phone or a computer. Enter Dark Mode.

Dark Mode has become more and more popular. If your app or website has a dark mode then you already have won the battle. It is easy to implement with React and Material UI. It will render components with dark colors and contrasting text that is easy on the eyes.


In this article we will be starting from scratch, creating a react app, installing Material UI, and setting up a context to store the state of our theme.

The source for this article can be found here.

To start we will be using React with TypeScript. You can either use npm or yarn.

Here is the command straight from the React website, to install React.

Okay, now we have React installed. Let’s create a React Context to store the theme state of a user. Not all people like dark mode, so we will default to it being false.

This will create a React Context in which we can store a boolean variable called darkMode, and a setter function called setDarkMode, which can switch between a light and dark mode.

Now we will create a React Context Provider, which we can use anywhere in our app.

This snippet will create a React Context Provider that will use a custom hook called useLocalStorage.

Check out my article on how to create your own customs hooks, especially the useLocalStorage hook.

Now let’s start exporting our awesome context, so we can use them within our app.

This will export the Context and the Provider to use within our app. But let’s also export some helper functions so we can neatly wrap or components.

The useStore function is our hook into this Context. We will be using this in our component that will switch the theme.

The withProvider function is our wrapper that will enable us to neatly wrap our app component in this context. If you’re not familiar with React Context, here is a link to get caught up.

https://reactjs.org/docs/hooks-reference.html#usecontext

Let’s add a few more helper functions.

The useApp function just renames the useStore function to something more understandable. This is our App context. Anytime the theme changes it needs to update the entire app. Of course you do not want to do this state change very often. You probably want to useMemo and useCallback to make you app more efficient, but that is a broader topic that we will address in a later article.

The withThemeProvider function is a wrapper that will enable us to wrap our app in a Material UI theme. You can see that I am using the useApp hook and pulling the darkMode boolean to decide which theme to use for Material UI. When that variable state changes it will render this component with the new theme.

Now let’s look at our simple App component.

This is our App component that will take in our useStore hook and grab the darkMode and setDarkMode from the context.

It will render a switch component the user can use to switch on or off the dark mode theme.

You probably want to have this switch in a drawer or a user settings page. Once you have the Context, we wrap the app in our withThemeProvider.

Once again, you should keep in mind, when creating a global context like this, the performance of your app. A global context should only store information about the whole app, such as the theme or the logged in user.

Thanks!

JavaScript in Plain English

Learn the web's most important programming language.

Andrew Bliss

Written by

Quality by design, building complex cloud applications with a solid technical background, a keen eye for detail and a self motivated, user-centered attitude.

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade