How to implement dark mode using Tailwind and React JS?

Cristian Montoya — Wed, 14 Feb 2024 20:52:08 +0000

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

In this file, you will find all the configurations corresponding to Tailwind. Here you will add the following property:
darkMode: 'class'

2. Logic in the button that will toggle the mode

To perform the mode switch, we will directly access the DOM

We will use a 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.
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)

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

3. Changing the HTML class with useEffect

Using the 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.

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:

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.

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

Cristian Montoya — Wed, 14 Feb 2024 02:41:18 +0000

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.

DEV Community: Cristian Montoya