DEV Community

Thomas Ledoux
Thomas Ledoux

Posted on • Updated on • Originally published at thomasledoux.be

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

Top comments (19)

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
 
peteristhegreat profile image
Peter H

Perfect. Thank you. Much easier than a lot of other solutions.

Collapse
 
mdfasadik profile image
Md F A Sadik

Thanks for sharing the wonderful idea ❤️

Collapse
 
thomasledoux1 profile image
Thomas Ledoux

You're welcome!

Collapse
 
rjitsu profile image
Rishav Jadon • Edited

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

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

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

Happy to hear that! Glad to help

Collapse
 
daviddalbusco profile image
David Dal Busco

Next + Tailwind = Sweet tech stack!

Thanks for the share Thomas 👍

Collapse
 
thomasledoux1 profile image
Thomas Ledoux

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

Excited to see the result!

Collapse
 
kevinalfito69 profile image
Kevin Alfito

use dark: is not working so i use
const {theme, setTheme} = useTheme()
className={theme === 'dark' ? 'text-blue-500' : 'text-white'}

is there any solution?

Collapse
 
kevinalfito69 profile image
Kevin Alfito

I found my problem, i didn't add code
module.exports = {
darkMode: 'class',
// ...
}

to tailwind.config.js

Collapse
 
karanpratapsingh profile image
Karan Pratap Singh

This helped, thanks

Collapse
 
thomasledoux1 profile image
Thomas Ledoux

Glad it helped!

Collapse
 
aliifam profile image
Aliif

thx