DEV Community

Cover image for How I built the dark mode of (website + docs) in 10 minutes using Nightwind & Next.js

Posted on

How I built the dark mode of (website + docs) in 10 minutes using Nightwind & Next.js

Nightwind is a plugin for Tailwindcss that automatically generates the dark mode of any Tailwind website, while also giving full customisation options.

GitHub logo jjranalli / nightwind

An automatic, customisable, overridable Tailwind dark mode plugin

From now on, I'll be creating the dark mode of well-known Tailwind websites to explore how Nightwind behaves in different cases. Especially, the effectiveness of its automatic dark mode.

What Nightwind does is essentially invert the color classes used throughout a website (for example, a bg-red-300 turns into bg-red-600). Thanks to the curated Tailwind color palette, this usually results in a good-looking, coherent dark mode.

I picked as the first one, as I felt it would've been the most challenging given the complexity and extensive use of color classes throughout the websites. homepage dark-mode comparison documentation dark-mode comparison

You can check the dark version of the homepage and the whole documentation here -> (press the Nightwind toggle in the navbar)

How I did it

1. Set up Nightwind in next.js, using 'next-themes'

I use ThemeProvider to manage light and dark modes, setting the storageKey parameter to 'nightwind-mode' to make sure the chosen mode persists.

// _app.js
import { ThemeProvider } from "next-themes"

function MyApp({ Component, pageProps }) {
  return (
      defaultTheme="system" // default "light"
      <Component {...pageProps} />

export default MyApp
Enter fullscreen mode Exit fullscreen mode

In _document.js I simply add the "nightwind" class to the Html element, which is used by Nightwind to manage transitions between modes.

// _document.js
import Document, { Html, Head, Main, NextScript } from "next/document"

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }

  render() {
    return (
      <Html className="nightwind">
        <Head />
          <Main />
          <NextScript />

export default MyDocument
Enter fullscreen mode Exit fullscreen mode

2. Set up a toggle

import { useTheme } from "next-themes"

export default function Toggle() {
  const { theme, setTheme } = useTheme()

  const toggle = () => {
    if (!document.documentElement.classList.contains("dark")) {
    } else {

  return <button onClick={toggle}>Toggle</button>
Enter fullscreen mode Exit fullscreen mode

3. Add Nightwind into Tailwind.config.js

Finally, I specify what colorClasses and variants I want Nightwind to invert, as well as add the "typography: true" option to invert all colors used by the typography plugin (used in the tailwind documentation).

module.exports = {
  darkMode: "class",
  theme: {
     nightwind: {
       typography: true,
       colorClasses: ['gradient', 'ring', 'ring-offset', 'divide', 'placeholder'],
  variants: {
    nightwind: ['group-hover', 'active', 'focus'],
  plugins: [require("nightwind")],
Enter fullscreen mode Exit fullscreen mode

Note: There are also some minor modifications that were made to make everything work seamlessly. You can explore the full commit here

To learn more about Nightwind, I suggest you visit:

Thanks for reading! And if you have any suggestion about what other Tailwind website I should create the dark mode for, please let me know! :)

Top comments (1)

cryptus_neoxys profile image
Dev Sharma

This is so good
Perfectly fits with the dev patterns of Nextjs.