¿Cómo implementar modo oscuro usando tailwind y react js?
Tags: webdev, react, tailwindcss, español
Published: 2024-02-14 02:41:18

El modo oscuro se ha convertido en un estándar en las aplicaciones tanto móviles como web, la sobriedad, elegancia y serenidad que transmiten los tonos oscuros con contrastes claros han propiciado que gran parte de los usuarios prefieran que la app que usan cuente con la opción de cambiar el tema a modo oscuro.

La implementación del tema oscuro en una app construida con react js y [tailwind](https://tailwindcss.com/) es bastante sencillo, basta con un par de configuraciones en tu archivo _**tailwind.config.js**_ y construir una pequeña lógica para detectar el cambio de tema desde tu aplicación.

## **1. Configurando tailwind**
Abre tu archivo tailwind.config.js
![imagen del archivo tailwind.config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/om6ujsek1gutyt3tz08i.png)
En este archivo encontrarás todas las configuraciones correspondientes a tailwind, aquí agregaras la siguiente propiedad:

`darkMode: 'class'`
![imagen del archivo tailwind.config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vuj9e03k8ydho028a4pp.png)

## **2. Lógica en el botón que cambiara el modo**
Para realizar el cambio entre modos accederemos directamente al [DOM](https://developer.mozilla.org/es/docs/Web/API/Document_Object_Model/Introduction)

Usaremos un _[useState](https://react.dev/reference/react/useState#usestate)_ que cambiará según se presione el botón. 

- Definición del useState:
Se define con el nombre _theme_ y su respectivo modificador _setTheme_, este será de tipo string y por defecto va a tener el valor 'light'
 
![Imagen de la definición del estado](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2rb6vti93frth2d523t6.png)

- Definimos el botón que realizará el cambio:
En el botón que usaremos para hacer el cambio de tema usaremos el método onClick para llamar a una función que realizara el cambio del estado llamada _changeTheme_ _(Esta función puede llevar el nombre que prefieras por ejemplo handleChangeTheme)_

![Imagen de la definición del botón ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k9jsai0gakzuwznrlr98.png)

- Función que ejecutará el cambio:
En la función changeTheme se realiza el cambio del valor del estado _theme_ por medio de una condición establecida por medio del _[operador ternario](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Conditional_operator)_, si el valor del estado es 'light' se cambiará a 'dark', en caso contrario el valor será 'light'. De este modo vamos a garantizar el cambio entre ambos valores cada que se de click en el botón.
![Imagen de la función para cambiar el modo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pfbz8szhhyzae9toenrc.png)

## **3. Cambiando la clase del html con useEffect**
- Por medio del hook [useEffect] (https://react.dev/reference/react/useEffect) añadiremos y removeremos la clase ´dark´ dependiendo del contenido del estado _**theme**_: en caso de que el contenido sea 'dark' vamos a añadir la clase dark a nuestro html accediendo al DOM, en el caso de que el valor del estado sea 'light' removeremos dicha clase del html.

![Imagen del useEffect](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/67iibaq8ve620l3378sj.png)

## **4. Aplicando los estilos del modo oscuro**
Ahora lo único que debemos hacer es anteponer la palabra _dark:_ antes de cada estilo que queremos agregar al modo oscuro además de los estilos que ya tendremos definidos en el modo claro en el elemento al que le queremos aplicar dichos estilos de la siguiente forma:


![Implementacion del modo oscuro](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/odp4vesixm337wfxk4yq.png)

## Conclusión
 Esta es la manera de implementar el modo oscuro en una app realizada con react js, sin embargo puede aplicarse a cualquier framework moderno de js.