How to Add Dark Mode in React with Tailwind CSS

React dark mode switcher example. In this article, we will ascertain how to integrate or enable dark mode as well as the light mode in React component using the Tailwind CSS.

The dark mode is becoming quite popular nowadays. The main idea behind dark mode is to reduce the bright light emitted by the device screen while simultaneously managing the minimum color contrast ratio essential for content readability.

Ideally, iPhones and Android devices come with dark modes.

What if you have a requirement to implement the dark mode in React apps. Well, this guide will answer regrading enabling the dark mode in React platform.

We will share the whole idea. Instead, I will show you the right path step by step about how to create dark mode and light mode switcher in React app using Tailwind CSS library, function component, and useState hook.

How to Use Tailwind CSS to Add Dark / Light Mode in React

  • Step 1: Download React Project
  • Step 2: Add Tailwind in React
  • Step 3: Build New Component
  • Step 4: Create Light and Dark Mode Switcher
  • Step 5: Update Global Component
  • Step 6: Start Development Server

Download React Project

The first requirement for assimilating this guide is to install React CRA (create react app) tool

npm install create-react-app --global

Let us install a new React application in your development system.

npx create-react-app react-blog

Once the app is downloaded, enter into the app folder.

cd react-blog

Add Tailwind in React

Open the command line tool, type the suggested commands with npm attribute. Hit enter to install both the command.

npm install -D tailwindcss

npx tailwindcss init

We have installed the Tailwind library in React app. Similarly, the npm tailwind init command generated the tailwind.config.js file.

You need to add the following code into the Tailwind config file.

module.exports = {
  darkMode: 'class',
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

In order to work the Dark toggle button, make sure to set class property to darkMode property in the tailwind configuration file.

Once we defined the tailwind libraries in App.css file we are now ready to add Tailwind components in React app.

@tailwind base;
@tailwind components;
@tailwind utilities;

On the terminal, type and execute the given command to compile the tailwind css in react.

npx tailwindcss -i ./src/App.css -o ./src/styles/output.css --watch

Build New Component

Inside your react project, make /components directory, then make the DarkComp.js file.

import React from 'react'

function DarkComp() {
  return (
    <div>React Dark Mode Switcher Example</div>
  )
}

export default DarkComp

Create Light and Dark Mode Switcher

We are now going to show you how to implement tailwind component in react at the same time how to set up the dark mode classes so taht we can enable the dark and light mode in react. Ensure that you add the given code into the components/DarkComp.js.

import React, { useState } from 'react'

function DarkComp() {
  const [switcher, setSwitcher] = useState(false)

  return (
    <div
      class={`h-screen bg-gray-300 w-full flex items-center justify-center flex-col ${
        switcher && 'dark'
      }`}
    >
      <label class="toggleSwitcher">
        <input type="checkbox" onClick={() => setSwitcher(!switcher)} />
        <span class="toggleBtn round"></span>
      </label>

      <div class="max-w-sm rounded bg-gray-100 p-5 rounded-lg mt-4 text-white overflow-hidden dark:bg-gray-900">
        <img
          class="w-full"
          src="https://v1.tailwindcss.com/img/card-top.jpg"
          alt="Sunset in the mountains"
        />
        <div class="px-6 py-4">
          <div class="text-gray-800 dark:text-gray-200 font-bold text-xl mb-2">
            The Title
          </div>
          <p class="text-gray-800 dark:text-gray-200">
            Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur.
          </p>
        </div>
        <div class="px-6 pt-4 pb-2">
          <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">
            #live
          </span>
          <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">
            #free
          </span>
          <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">
            #halo
          </span>
        </div>
      </div>
    </div>
  )
}

export default DarkComp

We have created the dark and light mode toggle button or switcher. Now, its time to style the dark mode switcher using the custom css code, make sure to add the given code into the index.css file.

@import url("./styles/output.css");

.toggleSwitcher {
  position: relative;
  display: inline-block;
  width: 70px;
  height: 42px;
}

.toggleSwitcher input {
  width: 0;
  height: 0;
  opacity: 0;
}

.toggleBtn {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  background-color: rgb(87, 40, 241);
}

.toggleBtn:before {
  position: absolute;
  content: "";
  height: 31px;
  width: 31px;
  left: 6px;
  bottom: 6px;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  background-color: #ffffff;
}

input:checked + .toggleBtn {
  background-color: #000;
}

input:focus + .toggleBtn {
  box-shadow: 0 0 1px #5621f3;
}

input:checked + .toggleBtn:before {
  -webkit-transform: translateX(25px);
  -ms-transform: translateX(25px);
  transform: translateX(25px);
}

.toggleBtn.round {
  border-radius: 34px;
}

.toggleBtn.round:before {
  border-radius: 50%;
}

Update Global Component

In this step, we don’t have to do much just open the App.js and in this file import the DarkComp component as suggested below.

import './App.css'
import DarkComp from './components/DarkComp'

function App() {
  return (
    <div>
      <DarkComp />
    </div>
  )
}

export default App

Start Development Server

We can now easily test the dark mode switcher on the browser. You have to execute the provided command to run the react app.

npm start
http://localhost:3000

How to Add Dark Mode in React with Tailwind CSS

Summary

A dark mode is another UI theme that shows text and content with light text on a dark or black background instead of the traditional black text on a light or white background.

The next question arises when we should use dark mode. Dark mode or interfaces are best suited for nighttime or evening environments. Likewise, the light mode is ideal for daytime.

In this tutorial, we learned how to construct a dark and light mode switcher that will add the dark mode in react theme and the light mode in react app.