DEV Community

Cover image for How to implement dark mode using Tailwind and React JS?
Cristian Montoya
Cristian Montoya

Posted on • Updated on

How to implement dark mode using Tailwind and React JS?

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
imagen del archivo tailwind.config
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

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. Imagen de la definici贸n del estado
  • 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

  • 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. Imagen de la funci贸n para cambiar el modo ## 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. Imagen del useEffect ## 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 ## 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.

Top comments (2)

Collapse
 
vashnavichauhan18 profile image
vashnavichauhan18

Great work on implementing dark mode using Tailwind in React! Your step-by-step guide is clear and easy to follow.馃懇鈥嶐煉籓ne suggestion I have is to consider using code iframes instead of images for the code snippets. This would make it easier for readers to copy and paste the code directly into their projects, improving the overall usability of your blog.

Keep up the excellent work!

Collapse
 
cristianmontoya98 profile image
Cristian Montoya • Edited

Thank you for your comment, I'm glad it was clear for you. I'll consider your advice into account for next time.