¿Cómo implementar modo oscuro usando tailwind y react js?

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 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

En este archivo encontrarás todas las configuraciones correspondientes a tailwind, aquí agregaras la siguiente propiedad:

darkMode: 'class'

2. Lógica en el botón que cambiara el modo

Para realizar el cambio entre modos accederemos directamente al DOM

Usaremos un 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'

• 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)

• 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, 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.

3. Cambiando la clase del html con useEffect

• Por medio del hook 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.

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:

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.