How to create dark mode in React using styled-components and hooks!

Dark Mode has become so popular that even GitHub added this feature to the website!

well why don’t we add it to our React project?

Here I want to introduce a cool and easy way to create dark mode. But beforehand we need to be familiar with:

hooks
context
styled components

Hooks

Hooks is a way to write functional components with the functionalities which is available in class components, such as state.

We can use hooks only in functional components and for react 16.8 and higher.

One of the important hooks that we use in this tutorial is useState. This hook gives back an array with two values: A state and a function to set the state.

For example after importing useState from ‘react’ library to our functional component, we can use it to create theme state:

“LightTheme” is the initial state.

We can use useState as many as the states we need for our component.

Context

Context is an official part of React for state management. As mentioned by official React website:

“Context is designed to share data that can be considered “global” for a tree of React components, such as the current authenticated user, theme, or preferred language”.

It enables to gather states in a context . Using a Provider/Consumer concept, the components can consume the needed state at any level, without prop drilling.

Styled Components

Styled-component is a CSS in JS tool. It makes you able to create custom components that are styled!!!, using tagged template literals.

One advantage that can help us a lot in creating dark mode is the ability of dynamic styling using ‘props’.

For example in code below a custom text-input component is defined which its text color and background color are passed dynamically via props:

Dark Mode in react

Now that we reviewed main concepts lets start creating a dark mode.

First of all we have to create two .js files for our styling:

global.js: The global styles are defined in this file using styled components:

2. theme.js : Our themes(light/dark) are defined in this file.

Then we need to create a context for holding ‘theme’ state and a provider to provide this state for consuming components. We can define both in one .js file named ‘theme-provider’.

The provider of themeContext that we created, provides ‘theme’ state and ‘toggleTheme’ function where ever needed by wrapping it around components.

The ThemeProvider from styled-components provides accessing to themes we defined by passing current theme object to it as a prop.

Now by wrapping our context provider around the App component we can access our theme objects anywhere.

Lets create a theme toggle button to show how to change the theme and also how to use ‘theme’ state.

and use this component in our header component:

As you can see, we can access ‘theme’ and ‘toggleTheme’ values using useContext where ever needed in our react components (eg. Header, ModeBtn). But the good news is that there is no need to use this hook for passing the ‘theme’ state as props to our styled components(eg. TextBoxContainer, TextInput), because the ThemeProvider from styled-components made it available for us, as a default prop, every where. Like in text box component: