Dark Mode Using TailwindCSS/React Hooks

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?

In short, tailwind is a utility-first css framework that allows you write ALL your css with inline styles. You never have to come up with different class names, have your css file grow to 1,000 lines, or constantly switch between your css file and your code. Tailwind package comes with tons of classes like flex, bg, justify-center and more that don’t stray too far off from standard css property names, making the learning curve not as steep as other frameworks. One of the biggest design come-ups of 2020 was the addition of the dark mode feature to applications. I am going to be showing you how to create the dark mode feature shown in the Gif above. With it becoming more and more common it is a great design feature to show off in your next project, so let’s get after it.

Dark Mode

After proper set up of Tailwind, you are going to want to change the darkMode attribute to ‘class’ from the default value of “false”. You can also implement the dark mode feature with the ‘media’ attribute that uses the operating system preferences. We are going to be handling dark mode within our browser.

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

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

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

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.

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!