Implementing Dark Mode Using Tailwind Css. Dark Mode Switcher

Dark Mode is a display setting built for user interfaces. It lets users change the theme color of the application to black or a color closer to black. Recently, most developers have been including this feature in their applications. The applications contain a toggle switch that changes the color to dark or light when clicked. The recent version of Tailwind css comes with a feature that enables users to add dark mode to their webpages. In this tutorial, we will use the feature to add a dark theme to our page.

Download

Implementing Dark Mode Using Tailwind CSS

Dark Mode is a display setting built for user interfaces. It lets users change the theme color of the application to black or a color closer to black.

Recently, most developers have been including this feature in their applications. The applications contain a toggle switch that changes the color to dark or light when clicked.

The recent version of Tailwind css comes with a feature that enables users to add dark mode to their webpages.

In this tutorial, we will use the feature to add a dark theme to our page.

Prerequisites

To follow through this article, you need to have a clear understanding of HTML, CSS, Tailwind CSS, and Javascript.

Let’s get started!

Step 1: Adding Tailwind to your project

I will assume that you have the latest version of Tailwind installed. If not, I suggest you go through this article first.

Step 2: Our HTML

We will need some content on our webpage so that we can see the cool dark mode effect.

This is the webpage we will use:

Blog page

This is the code for the webpage:

<div class="flex flex-row items-center justify-center">
  <div class="max-w-md p-8 mx-auto rounded-lg">
    <h2 class="items-start text-3xl font-bold text-black ">
      Tailwind Dark Mode
    </h2>
    <p class="font-semibold text-gray-800">
      We can switch from light to dark mode!
    </p>
    <p class="font-light">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe suscipit
      reprehenderit deleniti perferendis debitis ullam quos praesentium, esse
      totam adipisci illum illo.
    </p>
    <button
      class="flex items-center w-24 px-2 py-2 mt-4 text-center text-white bg-blue-900 rounded-lg "
    >
      Read More
    </button>
    <!--IMAGE HERE-->
    <div class="mb-5 w-96 h-46">
      <img class="mt-2 rounded" src="./images/image1.jpg" />
    </div>
  </div>
</div>

Now that we have a page to practice on, let’s move to the next step.

Step 3: Building the switch

Before you begin, ensure you have a clear idea of how you want your switch to look like and where you want it to be.

Some web pages have the dark mode feature in the “Settings” tab of the navigation bar. Others include this feature on the top-right corner of the page.

For our case, we will place it on the right corner because it is much simpler.

Let’s get to it!

We will use the input element for the switch.

Our first task is to ensure that the switch is at the top-right corner of the webpage.

We do this by creating a div container with the following classes:

<body>
  <div
    class="absolute right-0 flex items-center justify-center mx-auto top-5 left-1/3"
  ></div>
</body>

What’s happening here?

flex will align the contents of the switch vertically. items-center, justify-center, and mx-auto will align the switch to the center. The absolute class positions elements outside of the normal flow of the page. Therefore, to control the absolutely positioned switch, we will add top-5, right-0, and left-1/3. This means that our element will be to the right and at the top. Let’s add some content so that we can see the position.

We will add another div element under the container.

The div will contain the following classes:

<div class="relative flex items-center justify-end mx-auto space-x-2">
  <span class="text-xs font-extralight">Light </span>
  <span class="text-xs font-semibold">Dark</span>
</div>

This is how it should look like at this point:

Result

In the code above:

flex will align content vertically on the same line, while justify-end will align the switch to the end of the container’s space. The switch is moved to the right.
space-x-2 adds some space between the toggle switch and the words “light” and “dark”. In this case, we have used words instead of icons for easy understanding.
The element adds the words “light” and “dark”. relative class positions the items to the right. This means that the words will not affect the layout of the page or anything around them.
With the words “light” and “dark” acting like icons on our page, let us add the switch which will be clickable. It will appear between the two words.

Under the element that adds “Light” text, create another div element like the one below:

<div>
  <input type="checkbox" name="" id="checkbox" class="hidden" />
  <label for="checkbox" class="cursor-pointer">
    <div class="flex items-center h-5 bg-gray-300 rounded-full w-9 p2">
      <div class="w-4 h-4 bg-white rounded-full shadow"></div>
    </div>
  </label>
</div>

What have we added here?

First, we have created a checkbox; we have used element to do so. The checkbox will apply the “ON” and “OFF” style to our switch; it is hidden using the hidden class. There is a element below the element. It will allow us to click anywhere on the switch to turn it on or off. The class cursor-pointer enables that feature. Under , there is another

element that creates an item for us to click on. The item has a gray background and a round shape. The second

element creates a ball inside the round-shaped item. This will help us see if the checkbox is checked or unchecked since it is hidden. At this point, our switch should look like the one below:

Step 3 end result

Let’s add some custom CSS to the ball for it to move when we click on it!

For the custom CSS, let us name the ball switch-ball and add style using