DEV Community

Thomas Ledoux
Thomas Ledoux

Posted on

Easy way to use Dark Mode in Next.js + Tailwind

Yesterday I was working on my personal website, and I really wanted to add a dark mode toggle.
I already converted my site to use Tailwind before, so how do I enable dark mode now?

It's simple: in Tailwind v2 dark mode is built in (https://tailwindcss.com/docs/dark-mode).

To be able to toggle the dark mode, you should put darkMode: 'class' in your tailwind.config.js.
This configuration implies that a class called dark will be added to the <html> tag.
Once this class is active, your dark:{class} classes will become active.

To link this functionality up with Next.js I used the lightweight next-themes library (https://github.com/pacocoursey/next-themes).

After installing this library, simply change your _app.js to include the ThemeProvider:

import { ThemeProvider } from 'next-themes'

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

export default MyApp
Enter fullscreen mode Exit fullscreen mode

Including the attribute="class" is very important, since this tells the library to use the Tailwind dark theme class.

For the toggle button I used the following:

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')}
>
Enter fullscreen mode Exit fullscreen mode

An example of the dark:{class} code, this will use a purple background color for light mode and a darkgrey color for dark mode:

<nav className="fixed bg-purple dark:bg-darkgrey h-16 w-full z-50">
Enter fullscreen mode Exit fullscreen mode

And that's it! The theme is being switched when you click the button.
Live example can be found here: https://www.thomasledoux.be/
Github source: https://github.com/thomasledoux1/website-thomas
Inspired by: https://leerob.io

Discussion (16)

Collapse
shrihari profile image
Shrihari Mohan

Was new to react & next , was confused with using contexts on _document.tsx , because at the tailwind docs it said add class to HTML.
This is a life saver. ♥️

So i went to docs of next-theme. and missed the attribute = class part (wasted 10 mins of life)

By the way , Thanks , really appreciate it.

Collapse
daviddalbusco profile image
David Dal Busco

Next + Tailwind = Sweet tech stack!

Thanks for the share Thomas 👍

Collapse
thomasledoux1 profile image
Thomas Ledoux Author

I couldn't agree more :)
My pleasure!

Collapse
daviddalbusco profile image
David Dal Busco

I know it was a good idea to keep your post on the side, just used it 😉

Thx again Thomas!

Thread Thread
thomasledoux1 profile image
Thomas Ledoux Author

Excited to see the result!

Collapse
mdfasadik profile image
Md F A Sadik

Thanks for sharing the wonderful idea ❤️

Collapse
thomasledoux1 profile image
Thomas Ledoux Author

You're welcome!

Collapse
rjitsu profile image
Rishav Jadon • Edited on

I have done everything said here, and i still cannot see the dark mode happening. It changes if I set my system to dark mode, but I've set the darkMode property in tailwind.config.js to "class". Been googling for hours :(

Collapse
thomasledoux1 profile image
Thomas Ledoux Author

Hi Rishav, do you have a repository/codesandbox I can check out?

Collapse
rjitsu profile image
Rishav Jadon
Thread Thread
thomasledoux1 profile image
Thomas Ledoux Author

I think you could move the ThemeProvider in github.com/rjitsu/cssKenpai-v2/blo... to the top level of the rendering. Maybe that might help to get the <div className="dark:bg-gray-700"> part working?

Thread Thread
rjitsu profile image
Rishav Jadon

Great, that fixed it, thanks so much! I thought the ThemeProvider could only have Component as it's children, that's why I didn't try this yet. Thanks.

Thread Thread
thomasledoux1 profile image
Thomas Ledoux Author

Happy to hear that! Glad to help

Collapse
karanpratapsingh profile image
Karan Pratap Singh

This helped, thanks

Collapse
thomasledoux1 profile image
Thomas Ledoux Author

Glad it helped!

Collapse
aliifam profile image
Aliif

thx