React Dark Mode With Tailwind CSS

You've probably seen the dark mode option on many websites, along with the light mode. This indicates that users prefer using it to reduce strain on their eyes or prefer it over the light theme. If you want to add dark mode option to your react application with Tailwind CSS, then you can follow the steps below.

Add darkMode Property To Tailwind Config File

The first thing you need to do is to specify that you will switch the modes on your react js app adding the class attribute to the HTML tag, therefore set the class value to the 'darkMode' key in the Tailwind config file, as shown in the following code snippet:

module.exports = {
  mode: "jit",
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  darkMode: "class",
  theme: {},
  plugins: [],
}

Design Your Components For The Dark Theme

To specify how the design will look in dark mode, you need to add new classes to elements with the dark: prefix. For example, the following code renders a full-screen page with a white background and black text in light mode and a black background with white text in dark mode.

import "./App.css";
import { ToggleTheme } from "./ToogleTheme";

function App() {
  return (
    <div className="min-h-screen bg-white text-black dark:bg-black dark::text-white">
      {/* We will create this component in the next steps */}
      <ToggleTheme />
    </div>
  );
}

export default App;

Create Toggle Switch Component

Most likely, you have seen a toggle switch button that allows users to switch between modes. Therefore, in this step, we will create a component for the switcher.

The list of classes for the switch component is quite long. Simply put, we made the default checkbox invisible and created a custom checkbox instead. We then added peer-prefixed classes that respond to the status of the checkbox

import React, { useEffect, useState } from "react";

export function ToggleTheme() {

  // Code will place here to handle theme preference

  return (
    <label className="relative block w-11 h-6">
      <input
        onChange={toggleMode}
        type="checkbox"
        checked={isDark ? true : false}
        className="peer opacity-0"
      />
      <div
        className="absolute cursor-pointer left-0 
      top-0 bottom-0 right-0 bg-gray-200 rounded-3xl 
      before:absolute before:w-6 before:h-6 before:rounded-full 
      before:bg-yellow-200 peer-checked:before:translate-x-6 peer-checked:before:bg-black 
      before:transition-all duration-300"
      ></div>
    </label>
  );
}

Handle User's Theme Preference

Using the onChange event listener for the checkbox input, we will set the theme based on the user's preference by adding the 'dark' or 'light' class to the HTML tag. We will also save the theme choice to local storage to set the theme again when the user reloads the page.

Here is the last version of the ToggleTheme Component with functions to handle theme preference and switch input.

import React, { useEffect, useState } from "react";

export function ToggleTheme() {
  const [isDark, setIsDark] = useState(false);

  function setDark() {
    document.documentElement.classList.add("dark");
    document.documentElement.classList.remove("light");
    localStorage.setItem("theme", "dark");
    setIsDark(true);
  }

  function setLight() {
    document.documentElement.classList.add("light");
    document.documentElement.classList.remove("dark");
    localStorage.removeItem("theme");
    setIsDark(false);
  }

  function toggleMode() {
    if (isDark) {
      setLight();
    } else {
      setDark();
    }
  }

  // When the page is loaded or refreshed, check for theme preference
  useEffect(() => {
    if (localStorage.getItem("theme") == "dark") {
      setDark();
    } else {
      setLight();
    }
  }, []);

  return (
    <label className="relative block w-11 h-6">
      <input
        onChange={toggleMode}
        type="checkbox"
        checked={isDark ? true : false}
        className="peer opacity-0"
      />
      <div
        className="absolute cursor-pointer left-0 
      top-0 bottom-0 right-0 bg-gray-200 rounded-3xl 
      before:absolute before:w-6 before:h-6 before:rounded-full 
      before:bg-yellow-200 peer-checked:before:translate-x-6 peer-checked:before:bg-black 
      before:transition-all duration-300"
      ></div>
    </label>
  );
}

Conclusion

That's all. We have covered dark theme implementation with tailwind css in a react application. Note that you need to add classes with dark: prefix to your HTML elements according to your dark mode design requirements, after you have completed the dark mode design, you can test the theme switching using the toggle checkbox.

Thank you for reading.