How to implement dark mode using Tailwind and React JS?
Tags: frontend, react, tailwindcss, darkmode
Published: 2024-02-14 20:52:08


Dark mode has become a standard in both mobile and web applications. The sobriety, elegance, and serenity conveyed by dark tones with clear contrasts have led a large number of users to prefer their app to have the option to switch to dark mode.


The implementation of dark mode in an app built with [React JS](https://react.dev/) and [Tailwind](https://tailwindcss.com/) is quite simple. It only requires a couple of configurations in your tailwind.config.js file and building a small logic to detect the theme change from your application.

## **1. Setting up Tailwind**
Open your tailwind.config.js file
![imagen del archivo tailwind.config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/om6ujsek1gutyt3tz08i.png)
In this file, you will find all the configurations corresponding to Tailwind. Here you will add the following property:
`darkMode: 'class'`
![imagen del archivo tailwind.config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vuj9e03k8ydho028a4pp.png)
## **2. Logic in the button that will toggle the mode**
To perform the mode switch, we will directly access the [DOM](https://developer.mozilla.org/es/docs/Web/API/Document_Object_Model/Introduction)

We will use a _[useState](https://react.dev/reference/react/useState#usestate)_ which will change when the button is pressed.
- Definition of useState:
It's defined with the name _theme_ and its respective modifier _setTheme_. It will be of type string and will have the value 'light' by default.
![Imagen de la definición del estado](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2rb6vti93frth2d523t6.png)
- We define the button that will perform the change:

In the button we'll use to change the theme, we'll use the onClick method to call a function that will change the state called _changeTheme_ _(This function can be named as you prefer, for example handleChangeTheme)_
![Imagen de la definición del botón ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k9jsai0gakzuwznrlr98.png)
- Function that will execute the change: 
In the _changeTheme_ function, the value of the state _theme_ is changed using a condition established by _[the conditional operator](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Conditional_operator)_. If the value of the state is 'light', it will be changed to 'dark', otherwise, the value will be 'light'. This way, we ensure the switch between both values every time the button is clicked.
![Imagen de la función para cambiar el modo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pfbz8szhhyzae9toenrc.png)
## **3. Changing the HTML class with useEffect**
- Using the [useEffect] (https://react.dev/reference/react/useEffect) hook, we will add and remove the 'dark' class depending on the content of the _theme_ state: if the content is 'dark', we will add the 'dark' class to our HTML by accessing the DOM, and if the state value is 'light', we will remove that class from the HTML.
![Imagen del useEffect](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/67iibaq8ve620l3378sj.png)
## **4. Applying the styles for dark mode.**
Now, all we need to do is prefix each style we want to apply to dark mode with the word _dark:_ Additionally, we'll have the styles already defined in light mode on the element to which we want to apply these styles, like this:
![Implementacion del modo oscuro](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/odp4vesixm337wfxk4yq.png)
## Conclusion:
This is the way to implement dark mode in an app built with React JS, however, it can be applied to any modern JS framework.