Darkmode with TailwindCSS & Next Js: A Step-by-Step Guide

Tilak Oli
4 min readJan 26, 2023

--

Dark mode is a popular feature that allows users to switch between a light and dark theme on their devices.

In this blog post, we will be discussing how to implement dark mode in a Next.js application using the next-themes package and tailwind CSS.

How do I create a NextJS app?

Install tailwind CSS in your NextJS application?

Assuming you have installed tailwind CSS in your NextJS app we’ll follow these 5 steps:

  1. Add the next-themes package to our app.
  2. Wrap the component in the app js file with the theme provider from next-themes
  3. Add darkMode=’class’ in tailwind.config.js
  4. Use useTheme() hook to check for the system theme and handle the theme toggle.
  5. Handle the hydration mismatch issue.

Step 1:

We’ll use the next-themes package to check for the user’s system theme and to toggle between the dark and light themes. But first, we need to add the package to our application this can be done by running the following command in the terminal

yarn add next-themes

Step 2:

Wrap App.js with the Theme Provider Next, we need to wrap our App.js file with the theme provider from next-themes. This can be done by importing the provider and wrapping the App component in it. The code should look something like this:

wrap the app file with themeprovider.

Step 3:

Add darkMode:’class’ in tailwind.config.js In order to use dark mode with the tailwind CSS, we need to change the darkMode setting in our tailwind.config.js file to ‘class’. This setting tells tailwind to generate CSS classes instead of CSS variables for dark mode styles. The configuration should look something like this:

add darkMode: “class” in config file

After this we’ll be able the use the dark: attribute in tailwind CSS and using it we’ll specify the CSS we want when the dark mode is enabled. You can read more about it here.

Step 4:

Now we’ll use the useTheme() to check for the user’s system theme and handle the darkmode toggle accordingly. So let's first add a button that will be used to toggle the theme of our application. This will look something like this.

add button to toggle dark mode.

After this, we can use thedark variant from tailwind CSS that lets you style your site differently when dark mode is enabled, so we'll add some more content and write the CSS for darkmode and light mode like so

add more dummy content with dark variant

As you can see in the image above we can basically pass two different css properties for the light mode and for the dark mode like

<div className=”bg-white dark:bg-black”> </div>

Step 5:

And then to handle the hydration mismatch error from popping up.

A hydration mismatch is when the content rendered to HTML in Node.js isn’t the same than the content rendered in the browser.Hydration mismatches can induce performance degradation and bugs and should be avoided. Read more here.

So in order to let the browser know the theme value that we’re using from the next-themes package we can add some code that will wait for the component to be mounted and the value will be accessible to the browser. For this, we’ll use the useEffect() and useState() hooks. So go ahead and import them first.

and we check for the component to mount like:

Here the useEffect will run when the component will mount into the dom and we add a condition to check if the component has mounted or not. And then we return our JSX if it is mounted. So our final code should look something like this:

And that is all we should have a working darkmode toggle feature on our application. We can use this dark: variant wherever we want to style the project for darkmode.

Note: we can still use the dark: variant with out letting the users toggle it and the theme will switch according to the user's system theme.

Summary:

Users want dark mode and to set it up with TailwindCSS and Next.js it requires some configuration and basic state management. What you’ve done so far is just a start, and there is a lot of room to expand on the styles to make your application shine. Hope this article was helpful!😄

--

--