Dev Portfolio Site

It seems like most websites and applications these days have the ability to toggle light and dark mode. And if you are wondering, I always opt for dark mode whenever possible! 🌛 With that being said, this was one of the top frontend priorities for my application. There are many ways to accomplish this. Being someone that isn't the biggest CSS fan, I chose to use TailwindCSS as my CSS framework. Luckily implementing dark mode is dead simple using Tailwind! It should be noted that its easy to set up dark mode styles as you do regular styles in TailwindCSS. You just prepend any style you want in dark mode with "dark:" The following example is from the TailwindCSS Docs in which you can find more information.

<div class="bg-white dark:bg-gray-800">
  <h1 class="text-gray-900 dark:text-white">Dark mode is here!</h1>
  <p class="text-gray-600 dark:text-gray-300">
    Lorem ipsum...
  </p>
</div>

Configuration:

Once TailwindCSS is integrated into your NextJS project (Installing TailwindCSS) there will be a few things you need to add to your tailwind.config.js file. First you must configure the purge option and add all pages and components. This causes any unused TailwindCSS to be purged for production builds in order to optimize your application.

We then want to make sure the darkMode option is set to 'class' since we will be using this class to toggle light/dark mode. This is all we need to do with our tailwind.config file.

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

We will then use next-themes to easily keep track of and set our theme. In our app component we will import ThemeProvider and wrap our components.

import { ThemeProvider } from 'next-themes'

function App({ Component, pageProps }) {
  return (
    <ThemeProvider>
      <Component {...pageProps} />
    </ThemeProvider>
  )
}

export default App

Now you can import the useTheme hook in the component you will be toggling the dark mode. Theme will be the current state of your theme. In this case 'light' or 'dark'. You can then use setTheme() to change the theme. Since we are setting up a toggle function, inside setTheme() we can set up a ternary operator to toggle the theme between light and dark.

import { useTheme } from 'next-themes';

const toggleDarkMode = () => {
  const { theme, setTheme } = useTheme();

  return (
    <div>
      <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
        Light Mode
      </button>
    </div>
  );
};

At this point you should be able to toggle between dark and light mode!🌛 🌞 We are not completely in the clear though just yet. You may notice that if you set up your toggle button with different icons depending on what the current theme is (like my site) there may be a mismatch of what icon is showing and the current theme. Thankfully the solution to this situation lies in the next-themes docs!

The reason for the bug is that we cannot know the value of the theme until the component is mounted and the DOM is rendered. So our UI has no idea whether to render the dark mode icon or light mode icon. It's important to understand the value of theme is coming from the client side and not server side. The fix is to only render the part of the UI responsible to toggling the theme after mounting has occurred.

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

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

  useEffect(() => setMounted(true), []);

  return (
    <div>
      <h1>Welcome to my site!</h1>
      {!mounted ? null : (
        <button
          className=''
          onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
        >
          {theme === 'dark' ? <SunIcon /> : <MoonIcon />}
        </button>
      )}
    </div>
  );
};

Now we have a perfectly functioning dark/light mode toggle button! Go ahead a scroll back to the top of any of my pages and click the moon or light-bulb icon to give it a try! Resources I used to implement this feature:

• https://egghead.io/blog/tailwindcss-dark-mode-nextjs-typography-prose
• next-themes
• TailwindCSS Dark Mode Docs

back to top