A Quick Guide on How I Implemented Dark Mode in React

I strongly prefer dark mode to, well, regular mode (is it called light mode?) and use it across all my devices, so it only made sense to me to add a dark-mode option to my portfolio website. But, how? Heres a short tutorial on how I did it!

Where To Keep Track of the darkMode State?

I could have kept it in App.js, but it made more sense for my application to keep it in my MainContainer.js container. This container holds all the components that render on the main page which is why I decided it would be in charge of whether or not my dark mode switch was flipped. Here’s a rough sample of my MainContainer.

import React, { Container } from 'react'
// other imports here including component imports
export default class MainContainer extends Component {
   constructor() {
      super()
      this.state = {
         darkMode: false
      }
   }
   handleDarkModeToggle = (currentDarkMode) => {
      this.setState({ darkMode: !currentDarkMode})
   }
   if (this.state.darkMode) {
      // if darkMode === true return whatever I want in dark mode
      <MiscComponent darkMode={this.state.darkMode} />
      <DarkModeToggleComponent 
         handleDarkModeToggle={this.handleDarkModeToggle} 
      />
   } if (!this.state.darkMode) {
      // if darkMode === false return whatever I want in light mode
      <MiscComponent darkMode={this.state.darkMode} />
      <DarkModeToggleComponent 
         handleDarkModeToggle={this.handleDarkModeToggle} 
      />
   }
}

I’m setting the darkMode state to false starting out because I want it to default to light mode. I’m passing the darkMode state’s boolean to each of the components and/or containers that actually change to dark mode and also making sure to pass the handleDarkModeToggle function to the dark mode toggle itself.

How to Make the Toggle Work?

I created a component called DarkMode.js that only had the “Dark Mode” text and the actual toggle. The toggle, when clicked, called on the handleDarkModeToggle function that was passed down from the MainContainer.js container. The photo below shows the DarkMode.js component outlined in red.

Once toggled on, the slider would trigger it’s onChange function which, like I said, called the handleDarkModeToggle, passing in the current darkMode boolean to set state to whatever the inverse of the current darkMode state was (if it’s false, it will then be set to true.) See an example of my onChange function below.

onChange={() => props.handleDarkModeToggle(props.darkMode)}

And there you have it!!! A fully functioning, scalable dark mode. I can pass the darkMode state (or prop, depending on where the component or container is in my program) to any of the components in my application to have them re-render in the correct mode. If you wanted to have more color schemes, you could add a switch and let your user’s imagination run wild! I will likely be doing this in the future.

Do you know of another or better way to do it? Feel free to connect with me on LinkedIn, Twitter, or GitHub and let’s share some trade dark-mode secrets!