How To Make A Light And Dark Theme Using React And Bootstrap

In this tutorial, we will be walking through the steps of how to create a light/dark mode for your next react project using react-bootstrap.

Step 1: Create a new React app

First you are going to want to initialize a new project and cd into it if you haven't yet done this already.

npx create-react-app react-light-dark-tutorial

Step 2: Install Dependencies

After the project is initialized and is finished being created we are going to want to install the dependencies that we will need for this project using npm or your chosen package manager.

npm install bootstrap@5.1.3

This will install bootstrap. I specifically choose bootstrap version 5.1.3 as it was the version shown in the getting started section of react bootstrap so if you want to install react bootstrap and use it, you can also do that easily, but it won't be necessary for this tutorial.

npm install sass

This will install sass which helps with creating cleaner styling sheets. We will be using it for its ability to make variables.

Step 3: Start Up React

Next we want to start react so that we can see the changes that we are making.

npm start

React should open a new tab in your web browser but if it doesn't, the console should have logged a url for where you can access your site on your local machine.

Step 4: Add States

Now, open up your preferred code editor and edit the App.js file in the src directory. It should look like this...

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

We are going to need to import useState from 'react' to get started. useState is one of Reacts many hooks and will allow us to dynamically update the background when some condition is met.

import { useState } from 'react';

Now we are going to declare a new state withing the App function. We will call this state theme. We will also need a way to change theme, so we will make a function called themeToggler which will simply change theme between having 'dark' and 'light' as its value. To shorten the amount of code, I've left our the return value for App.

function App() {
  const [theme, setTheme] = useState('light');
  const themeToggler = () => {
    theme === 'light' ? setTheme('dark') : setTheme('light');
  };

  // ...
}

To have the user be able to toggle the theme, we need to add a button that when press will run the themeToggler function. We will add a button below the "Learn React" link, and add a onClick event to it that will run our themeToggler.

function App() {
  // ...
  
  return(
  <div className="App">
    <>...</>
    <button onClick={() => themeToggler()}>Toggle Theme</button>
    <>...</>
  </div>
  );
}

Step 5: Add Custom Bootstrap

For bootstrap to be able to use our themes, we need to do two more things. First we need to use some custom bootstrap classes so that bootstrap can apply a background to our website. Second we need to edit our App.css file and add custom theme colors to it so bootstrap can use those colors.

We will need to edit the div with className="App" in it and add some special bootstrap code to it. This code will allow bootstrap to use our custom colors that we will code in App.css

function App() {
  //...
  
  return(
  <div className={`App bg-${theme}bg`}>
    {/* ... */}
  </div>
  );
}

Now we need to edit App.css so that we can add the custom colors to it. Before we open App.css, we need to change the file type from css to scss as we will be using some of the features of Sass to create our themes. Because of this slight change, we also need to change the import at the top of App.js.

import './App.scss';

After opening App.scss, we will edit the theme-colors bootstrap variable. To do this, we will define a variable called theme-colors and put two items in it, the light theme and dark theme. We will also need to import bootstrap into this file as well. All this code is at the top on App.scss.

$theme-colors: (
  "lightbg": #ddd,
  "darkbg": #333
);

@import "~bootstrap/scss/bootstrap";

Finally we need to remove a property from the App-header class as it will conflict with our custom background we are trying to make.

.App-header {
  background-color: #282c34;  //Remove this line
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

Final Product And there we have it. Custom light and dark themes for your next react project. If you want to look at the raw source code in its entirety, it is up on my github account.