Dark Mode Using TailwindCSS/React Hooks

Image for post
Image for post

Disclaimer: If you haven’t heard of Tailwind CSS, or have but maybe haven’t experimented with it before; I would recommend checking out the docs. I will not be covering installation and set up of Tailwind so I advise referring to the docs to get set up first. I personally just started learning Tailwind and I think it is absolutely awesome, I recommend trying it out on your next project.

What is Tailwind CSS?

Dark Mode

// tailwind.config.js
module.exports = {
darkMode: 'class',
// ...
}

Now, let’s take a look at our useDarkMode hook we are going to create.

Image for post
Image for post
  1. Establish theme state with initial state as “light” mode.
  2. Create our colorVariable theme, this is set to equal the opposite of what our theme state is, this is important for the removal of the class theme that is not currently active.
  3. Create useEffect hook. I wrote a blog on it here. Grab the entire html document with
root = window.document.documentElement

4. We are then going to implement the logic of adding a classList to the entire document. When this useEffect fires we are going to add our state of theme, and explicitly remove the opposite with colorTheme. It will only fire when our theme state changes because we added theme into our dependency array. We return colorTheme and setTheme to use in our component where we wan’t to control the dark and light mode toggle. Let’s take a look at our nav component where we are going to do this.

Toggle

Image for post
Image for post

Now this may look like a lot but it really isn’t. I am adding a couple svg icons(light bulb and moon) from Heroicons, and placing them in the navbar. We are importing our useDarkMode hook and that’s really all it takes. Those long classNames are the actually the format of Tailwind. You can create beautifully styled elements all with inline styles. The only attribute you need to add to style your elements for dark mode is the “dark:” property. Pretty cool! As you can see from my code I change the navbar to bg-yellow in dark mode.

Image for post
Image for post

As far as rendering the different icons, I added a ternary statement rendering the lightbulb(1st svg) if we are in dark mode. NOTE: Remember that colorTheme is equal to the opposite of our current state.

colorTheme = "light" //means were actually in dark mode

I render the moon(2nd svg)if we are in light mode. We add an onClick on the span surrounding the icon to change our state to colorTheme. To change any element’s color when in dark mode just add the “dark:” property and list your color. To view/edit your available colors you can look within tailwind.css.confiq file and it will show the colors you currently have.

Hope you enjoyed!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store