Dark Mode in Next.js Application with Tailwind CSS

Implementing dark mode in an application is fairly simple when we are using Tailwind CSS. So let's start with the process.

As the title suggests we will be looking at the implementation of dark mode in a Next.js application. This is the same method I have used on this blog site.

Tailwind comes with a dark variant with which we will be able to style our site differently when dark mode gets enabled. The usage of dark in code would look something like below:

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

In this simple example, the background color of the div will be set to white in a normal case and will be switched to a black background when the dark mode is enabled.

Now let's see how the dark mode can be enabled on our site. For that tailwind provides 2 methods. We can check out both of the methods and implement them.

Dark Mode Based on System Theme

The first method is the easiest. All we have to do is add a property darkMode: 'media' in the tailwind.config.js file so that Tailwind CSS will automatically detect your system theme and use it in the application. For example, if you have set your system theme to dark mode Tailwind uses prefers-color-scheme CSS media feature and apply the dark mode classes to all the elements that you have specified in the application. This is the default behavior of Tailwind CSS so you don't actually have to specify darkMode: 'media' in the config file. I mentioned it here just to bring the understanding of how it works in the background and also we will be modifying this property in the next method.

Dark Mode Based on User Toggle

For the second method, we will change the darkMode property to 'class'. By adding darkMode: 'class' property in the tailwind.config.js Tailwind enables the users to toggle between dark and light modes based on their preference when using the application.

But there are a few more steps required when we are using this method in a Next.js application. So for that let's first understand how it works. When we add the darkMode: 'class' property implies that dark the class needs to be added in the <html> tag, only when this class is added dark:{class} is enabled for the other elements. To bring this functionality to our Next.js application we need to use next-themes library. Use npm install next-themes to install next-themes in our application. After the installation, update the _app.js file to include ThemeProvider.

import { ThemeProvider } from 'next-themes';

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider attribute="class" defaultTheme="dark">
      <Component {...pageProps} />
    </ThemeProvider>
  )
}

export default MyApp

attribute="class" tells the application to use tailwind dark theme classes. We can specify the default theme by using defaultTheme="dark".

Creating Toggle Button

Now we can create a button to enable the users to toggle between dark and light modes.

import {useTheme} from 'next-themes'

const {theme, setTheme} = useTheme()

<button
  aria-label="Toggle Dark Mode"
  type="button"
  className="p-3 h-12 w-12 order-2 md:order-3"
  onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
>

Just like that, we have implemented dark mode in a Next.js application.

Dark Mode in Next.js Application with Tailwind CSS

Dark Mode Based on System Theme

Dark Mode Based on User Toggle

Creating Toggle Button

Rahul

Leave a comment