How to Toggle Between Dark and Light Themes with Tailwind in React/NextJS application

As a web developer, you may want to offer your users the option to switch between dark and light themes in your application. This can enhance the user experience by allowing them to choose the theme that best suits their preferences or environment. In this blog post, we'll explore how you can implement a theme toggle switch using React and Tailwind CSS.

Setting Up the Project

First, let's assume you have a basic React project set up with Tailwind CSS configured. In your Tailwind configuration file (tailwind.config.js), you'll need to enable dark mode:

module.exports = {
  darkMode: "class",
  // rest of the config
};

By setting darkMode to "class", Tailwind CSS will generate dark mode variants based on the presence of a dark class on the html element.

Creating the Toggle Switch Component

Next, let's create a ThemeToggleSwitch component that will allow users to toggle between dark and light themes. Here's an example implementation:

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

const ThemeToggleSwitch = () => {
  const [isChecked, setIsChecked] = useState(false);

  useEffect(() => {
    const htmlElement = document.documentElement;
    if (isChecked) {
      htmlElement.classList.add("dark");
    } else {
      htmlElement.classList.remove("dark");
    }
  }, [isChecked]);

  const handleToggle = () => {
    setIsChecked(!isChecked);
  };

  return (
    <div>
      <label className="switch">
        <input id="toggle" type="checkbox" checked={isChecked} onChange={handleToggle} />
        <span className="slider"></span>
      </label>
      <div className="slide-block"></div>
      {/* Add your custom styles here */}
    </div>
  );
};

export default ThemeToggleSwitch;

In this component, we use the useState hook to manage the state of the toggle switch (isChecked). The useEffect hook is responsible for adding or removing the dark class on the html element based on the value of isChecked.

When the user toggles the switch, the handleToggle function is called, which updates the isChecked state. This triggers the useEffect hook to update the dark class on the html element accordingly.

Integrating the Toggle Switch

To use the ThemeToggleSwitch component in your application, simply import it and render it wherever you want the toggle switch to appear. For example, you can include it in your navigation bar or settings menu.

import ThemeToggleSwitch from "./ThemeToggleSwitch";

const App = () => {
  return (
    <div>
      {/* Your app content */}
      <ThemeToggleSwitch />
    </div>
  );
};

export default App;

Styling the Toggle Switch

You can customize the appearance of the toggle switch by adding your own styles. In the provided code snippet, you can see an example of CSS styles that define the colors and transition effects for the toggle switch.

Feel free to modify the styles to match your application's design and branding.

Conclusion

By following these steps, you can easily implement a theme toggle switch in your React application using Tailwind CSS. This allows your users to switch between dark and light themes seamlessly, providing them with a personalized and enjoyable experience.

Remember to test your toggle switch thoroughly to ensure it works as expected and provides a smooth transition between themes.

Happy coding!