Back to overview

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

PC with dark mode website displayed and all black equipment around it
| 2 min read
View count:

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 (

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 (

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} />
export default MyApp;

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();
return (
aria-label="Toggle Dark Mode"
className="p-3 h-12 w-12 order-2 md:order-3"
onClick={() => setTheme(theme === "dark" ? "light" : "dark")}

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

return <nav className="fixed bg-purple dark:bg-darkgrey h-16 w-full z-50" />;

And that’s it! The theme is being switched when you click the button. Live example can be found here: Github source: Inspired by:

Did you like this post? Check out my latest blog posts:

Person drawing flags on the ground
9 May 2024

Feature flags with Astro + Vercel Toolbar

5 min reading time

  • vercel
  • javascript
  • astro
Astral picture
29 Mar 2024

Astro DB: Migrating my analytics data from Vercel Postgres

5 min reading time

  • astro
  • database
  • vercel
  • postgres
  • libsql
Screenshot of an analytics dashboard
16 Jan 2024

Basic analytics with Vercel Postgres - Drizzle - Astro

10 min reading time

  • vercel
  • databases
  • typescript
  • astro