Create a Dark Mode of your app using Styled Components

Tom Nolan
Tom Nolan
Jun 4, 2019 · 5 min read

Many applications and software packages have begun shipping an optional dark mode that a user can enable as an alternative to the default lighter mode. Aside from the aesthetic differences, there are many other benefits mentioned ranging from being less taxing on your device’s battery consumption to actual improvements on your health.

While we’re not actually going to get into the alternative benefits from using the dark mode in this article, we will go through implementing it using React and Styled Components!

What we’re going to build

The application is going to consist of a few basic, styled elements including a button that will allow the user to toggle between a light and a dark mode. In addition to toggling the mode, it will also save the user’s preference so that their selection is remembered when they return.

A few tools we’re going to use to help us build the app:

You can check out a demo of the finished project here.

Part 1: Bootstrapping the App

As mentioned above, we’re going to utilize Create React App as a way to get our application up and running. If you do not already have Create React App installed, you can install it with:

npm install -g create-react-app

To initialize our new application run:

create-react-app dark-mode-toggle

Change into our new project directory:

cd dark-mode-toggle

And finally, let’s install the only additional dependency we will need — styled components:

npm install styled-components --save

Part 2: Build the App with a Light Theme

We’re going to initially build the application without the dark mode, so start by deleting all of the files from the current src directory of your project. Then let’s prepare the files:

When the above is complete, your folder structure should resemble:

└── src
├── index.js
├── style.css
├── themes
| └── light.js
└── components
├── App.js
├── Button.js
├── Card.js
└── Container.js

Now, let’s start writing some actual code! We’ll start in the src/themes/light.js file which will contain all of the colors required for the light mode.

In a real application, you will want to avoid naming conventions that pair 1:1 with a specific component and make them more universal, however, for the sake of this application, I’ve named the colors to their use-case.

Moving on to our src/index.js file to initialize our React application:

In the src/index.js file, we import the src/style.css file. To be clear, this stylesheet will not contain any of our theme’s styles, but one rule to just remove the default margin on the body element:

The next component we’re going to focus on will initially just provide the light theme we created above, but we will revisit it again later in this article when we add the logic to toggle the Dark theme. So, in src/components/App.js we’re going to:

In the src/components/App.js file we just created, we reference our three remaining components — Container, Card, and Button.

  • The Container is responsible for centering our content in the viewport
  • The Card is responsible for visually separating our content from the rest of the page
  • The Button component will be used to toggle the dark mode later on in the article

When we build each of these components below, we are going to make reference to the theme that is provided in the src/components/App.js file’s ThemeProvider. You can read more about how themes work with styled components here.

For our purposes, any time we reference a color, we will pull it off of our theme object using ${props => props.theme.colors.ourColorProperty}:

At this point, you should have an app that resembles:

Part 3: Providing a Dark Theme

Since we have a basic app that consumes a theme, let’s add a new theme! Create a new file in the src/themes directory called dark.js.

Inside that file, we’re going to copy paste the object from src/themes/light.js and just change the hex codes:

To test that our new theme works properly, let’s import it into our src/components/App.js file and swap that into our theme provider:

Once the above changes have been made, you should see the dark version of the application:

The last piece of this puzzle is to provide the ability to actually toggle between these two modes. We will do this by:

Once that is all hooked up, clicked the button should toggle the theme mode and save it into local storage. You can test this out by enabling dark mode and refreshing, and you should still see the dark mode!

Final Thoughts

  • A button is not the greatest of UX patterns to toggle a theme, so in a production application, you may want to consider something more appropriate like a checkbox!
  • While this article focused on a dark mode, there’s no limit to the number of themes you could offer, so you could swap the boolean value for a selection of some sort that provides more options to the end user
  • As mentioned a bit earlier, the naming conventions used in the theme is far from ideal for a larger application, so more thought should typically be put into the names
  • The colors used in this application are from the Nord Color Theme

The Startup

Get smarter at building your thing. Join The Startup’s +785K followers.

Sign up for Top 10 Stories

By The Startup

Get smarter at building your thing. Subscribe to receive The Startup's top 10 most read stories — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Tom Nolan

Written by

Tom Nolan

Frontend Software Engineer

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +785K followers.

Tom Nolan

Written by

Tom Nolan

Frontend Software Engineer

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +785K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store