How to Toggle Between Dark and Light Themes with Tailwind in React/NextJS application
Tags: react, nextjs, tailwindcss, webdev
Published: 2024-05-03 13:21:13


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!