DEV Community

Darren White
Darren White

Posted on • Originally published at darrenwhite.dev

Add Dark Mode when using Nextjs with Next Themes and Tailwind CSS

#react #nextjs #tailwindcss #javascript

After several recommendations I wanted to give next-themes a try. In this post I'll cover adding it along with Tailwind CSS to a Next.js website. A demo of what we will be building: https://dlw-nextjs-themes-tailwindcss-dark-mode.vercel.app/

Nextjs Setup

To get started the easiest way is to use create react app, full getting started instructions can be found on the Next.js website

npx create-next-app
# or
yarn create next-app
Enter fullscreen mode Exit fullscreen mode

Next themes

For controlling which theme is shown we'll use next-themes. Install the dependency using your prefered package manager:

npm install next-themes
# or
yarn add next-themes
Enter fullscreen mode Exit fullscreen mode

If you haven't already add a custom app component, Create-next-app will do this automatically. Now wrap Component component in the theme provider exported from next-themes with a property called attribute and a value of class

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

We need a way to change our theme. Add a new directory called components with the following:

import { useEffect, useState } from 'react';
import { useTheme } from 'next-themes';

const ThemeChanger = () => {
  const [mounted, setMounted] = useState(false)
  const { theme, setTheme } = useTheme()

  // When mounted on client, now we can show the UI
  useEffect(() => setMounted(true), [])

  if (!mounted) return null

  return (
    <div className="p-8 bg-gray-200 flex justify-between items-center font-bold text-xl">
      The current theme is: {theme}
      <div>
        <button className="hover:text-orange-600" onClick={() => setTheme('light')}>
          <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" /></svg>
        </button>
        <button className="ml-4 hover:text-orange-600" onClick={() => setTheme('dark')}>
          <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" id="moon" class="w-8 h-8 text-cool-gray-800 dark:text-cool-gray-200 group-hover:text-purple-600 group-focus:text-purple-600 dark:group-hover:text-purple-50 dark:group-focus:text-purple-50"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path></svg>
        </button>
      </div>
    </div>
  )
}

export default ThemeChanger;
Enter fullscreen mode Exit fullscreen mode

As Nextjs is SSR (server-side rendered) or SSG (static site generated) we don't know the theme on the server, therefore, we add a check to see if the component is mounted:

  // When mounted on client, now we can show the UI
  useEffect(() => setMounted(true), [])

  if (!mounted) return null
Enter fullscreen mode Exit fullscreen mode

If not it returns null ensuring the UI uses the current theme once the page is mounted on the client.

Also the theme changer component includes some Tailwind CSS classes which we'll set up next. These aren't important, the main thing of note is the useTheme hook and onClick handler for setting the theme.

The svg icons are courtesy of Heroicons.

Tailwind CSS

Now to set up Tailwind CSS

# If you're on Next.js v10
npm install tailwindcss@latest postcss@latest autoprefixer@latest
# or 
yarn add tailwindcss@latest postcss@latest autoprefixer@latest
Enter fullscreen mode Exit fullscreen mode

Run the following to generate the tailwind.config.js and postcss.config.js files:

npx tailwindcss init -p
Enter fullscreen mode Exit fullscreen mode

When complete set darkMode to 'class' in the tailwind.config.js

module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: class, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}
Enter fullscreen mode Exit fullscreen mode

This is how Tailwind CSS switches the styles. Also, notice the purge options which will remove any unused classes in our production build.

Demo page

Replace /pages/index.js with the following content:

import ThemeChanger from '../components/ThemeChanger';

export default function Home() {
  return (
    <div className="antialiased font-sans text-gray-500 dark:text-gray-200 bg-white dark:bg-gray-900 w-full">
      <ThemeChanger />

      <div className="relative py-16">
        <div className="relative px-4 sm:px-6 lg:px-8">
          <div className="text-lg max-w-prose mx-auto">
            <h1>
              <span className="block text-base text-center text-orange-600 dark:text-pink-500 font-semibold tracking-wide uppercase">Introducing</span>
              <span className="mt-2 block text-3xl text-center leading-8 font-extrabold tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl">next themes demo</span>
            </h1>
            <p className="mt-8 text-xl leading-8">Aliquet nec orci mattis amet quisque ullamcorper neque, nibh sem. At arcu, sit dui mi, nibh dui, diam eget aliquam. Quisque id at vitae feugiat egestas ac. Diam nulla orci at in viverra scelerisque eget. Eleifend egestas fringilla sapien.</p>
          </div>
          <div className="mt-6 mx-auto">
            <p>Faucibus commodo massa rhoncus, volutpat. <strong>Dignissim</strong> sed <strong>eget risus enim</strong>. Mattis mauris semper sed amet vitae sed turpis id. Id dolor praesent donec est. Odio penatibus risus viverra tellus varius sit neque erat velit. Faucibus commodo massa rhoncus, volutpat. Dignissim sed eget risus enim. <a href="#">Mattis mauris semper</a> sed amet vitae sed turpis id.</p>
            <ul>
              <li>Quis elit egestas venenatis mattis dignissim.</li>
              <li>Cras cras lobortis vitae vivamus ultricies facilisis tempus.</li>
              <li>Orci in sit morbi dignissim metus diam arcu pretium.</li>
            </ul>
            <p>Quis semper vulputate aliquam venenatis egestas sagittis quisque orci. Donec commodo sit viverra aliquam porttitor ultrices gravida eu. Tincidunt leo, elementum mattis elementum ut nisl, justo, amet, mattis. Nunc purus, diam commodo tincidunt turpis. Amet, duis sed elit interdum dignissim.</p>
            <blockquote>
              <p>Sagittis scelerisque nulla cursus in enim consectetur quam. Dictum urna sed consectetur neque tristique pellentesque. Blandit amet, sed aenean erat arcu morbi.</p>
            </blockquote>
            <p>Faucibus commodo massa rhoncus, volutpat. Dignissim sed eget risus enim. Mattis mauris semper sed amet vitae sed turpis id. Id dolor praesent donec est. Odio penatibus risus viverra tellus varius sit neque erat velit.</p>
          </div>
        </div>
      </div>

    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode

Notice how various classes are prefixed with 'dark:' for example:

text-gray-500 dark:text-gray-200
Enter fullscreen mode Exit fullscreen mode

When clicking our theme buttons the dark prefix will be activated if a .dark class is found higher up in the HTML tree (and vica-versa). If you haven't already, start the dev server to see it in action:

npm run dev
Enter fullscreen mode Exit fullscreen mode

And go to http://localhost:3000, we can not switch between the two themes. We do have unstyled HTML which we'll fix next.

tailwind TYPOGRAPHY

tailwind TYPOGRAPHY provides a set of default styling to any HTML or Markdown you don't control, for example, content pulled from a CMS.

To install the plugin, run:

# Using npm
npm install @tailwindcss/typography

# Using Yarn
yarn add @tailwindcss/typography
Enter fullscreen mode Exit fullscreen mode

Then update the tailwind.config.js, adding the plugin and specifying the dark variant for typography property. The latter config setting as caught me out a couple of times. Without that our prose-dark styles won't be applied

module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: 'class',
  theme: {
  },
  variants: {
    typography: ['dark'],
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
}
Enter fullscreen mode Exit fullscreen mode

I also added some styling for the typography plugin to use and extending the default colour palette. My final tailwind.config.js file looks like the following:

const colors = require('tailwindcss/colors');

module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        orange: colors.orange,
      },
      typography: (theme) => ({
        DEFAULT: {
          css: {
            color: theme('colors.gray.500'),
            strong: {
              color: theme('colors.orange.500'),
            },
            blockquote: {
              color: theme('colors.orange.700'),
            }
          },
        },
        dark: {
          css: {
            color: theme('colors.gray.500'),
            strong: {
              color: theme('colors.pink.500'),
            },
            blockquote: {
              color: theme('colors.pink.700'),
            }
          },
        },
      }),
    },
  },
  variants: {
    typography: ['dark'],
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
}
Enter fullscreen mode Exit fullscreen mode

Feel free to use different colours, and extend the HTML elements typography applies custom colours/styles to.

Back to the /pages/index.js page to add the necessary prose classes. Around line 17 update the parent content div from:

<div className="mt-6 mx-auto">
  <p>Faucibus commodo massa rhoncus, volutpat. <strong>Dignissim</strong> sed <strong>eget risus enim</strong>. Mattis mauris semper sed amet vitae sed turpis id. Id dolor praesent donec est. Odio penatibus risus viverra tellus varius sit neque erat velit. Faucibus commodo massa rhoncus, volutpat. Dignissim sed eget risus enim. <a href="#">Mattis mauris semper</a> sed amet vitae sed turpis id.</p>
  <ul>
    <li>Quis elit egestas venenatis mattis dignissim.</li>
    <li>Cras cras lobortis vitae vivamus ultricies facilisis tempus.</li>
    <li>Orci in sit morbi dignissim metus diam arcu pretium.</li>
  </ul>
  <p>Quis semper vulputate aliquam venenatis egestas sagittis quisque orci. Donec commodo sit viverra aliquam porttitor ultrices gravida eu. Tincidunt leo, elementum mattis elementum ut nisl, justo, amet, mattis. Nunc purus, diam commodo tincidunt turpis. Amet, duis sed elit interdum dignissim.</p>
  <blockquote>
    <p>Sagittis scelerisque nulla cursus in enim consectetur quam. Dictum urna sed consectetur neque tristique pellentesque. Blandit amet, sed aenean erat arcu morbi.</p>
  </blockquote>
  <p>Faucibus commodo massa rhoncus, volutpat. Dignissim sed eget risus enim. Mattis mauris semper sed amet vitae sed turpis id. Id dolor praesent donec est. Odio penatibus risus viverra tellus varius sit neque erat velit.</p>
</div>
Enter fullscreen mode Exit fullscreen mode

To:

<div className="mt-6 prose prose-orange dark:prose-dark dark:prose-pink prose-lg mx-auto">
  <p>Faucibus commodo massa rhoncus, volutpat. <strong>Dignissim</strong> sed <strong>eget risus enim</strong>. Mattis mauris semper sed amet vitae sed turpis id. Id dolor praesent donec est. Odio penatibus risus viverra tellus varius sit neque erat velit. Faucibus commodo massa rhoncus, volutpat. Dignissim sed eget risus enim. <a href="#">Mattis mauris semper</a> sed amet vitae sed turpis id.</p>
  <ul>
    <li>Quis elit egestas venenatis mattis dignissim.</li>
    <li>Cras cras lobortis vitae vivamus ultricies facilisis tempus.</li>
    <li>Orci in sit morbi dignissim metus diam arcu pretium.</li>
  </ul>
  <p>Quis semper vulputate aliquam venenatis egestas sagittis quisque orci. Donec commodo sit viverra aliquam porttitor ultrices gravida eu. Tincidunt leo, elementum mattis elementum ut nisl, justo, amet, mattis. Nunc purus, diam commodo tincidunt turpis. Amet, duis sed elit interdum dignissim.</p>
  <blockquote>
    <p>Sagittis scelerisque nulla cursus in enim consectetur quam. Dictum urna sed consectetur neque tristique pellentesque. Blandit amet, sed aenean erat arcu morbi.</p>
  </blockquote>
  <p>Faucibus commodo massa rhoncus, volutpat. Dignissim sed eget risus enim. Mattis mauris semper sed amet vitae sed turpis id. Id dolor praesent donec est. Odio penatibus risus viverra tellus varius sit neque erat velit.</p>
</div>
Enter fullscreen mode Exit fullscreen mode

Adding in prose prose-orange dark:prose-dark dark:prose-pink prose-lg. A final change is to add some styles to global/styles.css to ensure the background colour is full width and height, no matter the resolution viewing:

/* ./styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body {
  height: 100%;
  display: grid;
}

#__next {
  height: 100%;
  grid-row: 1/-1;
  grid-column: 1/-1;
}
Enter fullscreen mode Exit fullscreen mode

The final page should look something like the following:

next-themes-demo-light

next-themes-demo-dark

Cookies = Bad

As a final thought, I did look into using cookies to stop having to check if the component was mounted. The author of next-themes covers this in one of his comments on an issue pointing out the downside of cookies over local storage:

  • Forces your pages to be SSR, which alone causes more performance issues than a 2-3ms script does
  • Does not support SSG pages
  • You will still need a blocking script to support System theme (for full support at least)
  • Cookie parsing/setting is more verbose than localStorage, likely requiring a 5kb+ library

The full thread can be seen here https://github.com/pacocoursey/next-themes/issues/17

Top comments (1)

Collapse
 
kylemckell profile image
Kyle McKell •

Exactly what I needed, great post :)

Read next

codingashish_dev profile image

5 Ways to Add Tailwind CSS to Your Project

Ashish Prajapati -

samarpankc profile image

Tim Berners-Lee : The Man Behind the Web

Samarpan KC -

ajmal_hasan profile image

Building a Customisable Carousel with Auto-Scroll, Infinite Loop, Pagination in React Native using Reanimated

Ajmal Hasan -

dev007777 profile image

Open Canvas Vs ChatGPT Canvas

TheDev -