GraphQL

Laravel

NextJS

ReactJS

TailwindCSS

Dark mode is an essential feature in any modern application. Why is there nothing more irritant than going to a website with a white background at 1AM. Users expect dark mode out of the box. They aren't interested in your excuses and they also don't care how long it will take to implement, they just want dark mode!

# Below, what you will learn in this article:

- Next.js: The React framework
- TailwindCSS: A utility CSS framework
- Next-themes: An abstraction for themes for Next.js apps

# Getting started

Create your Next.js application with the command:

```bash
yarn create next-app --typescript
# or
npx create-next-app@latest --ts
```

And add Tailwind as a development dependency in the application:

```bash
yarn add tailwindcss autoprefixer postcss -D
# or
npm install -D tailwind autoprefixer postcss
```

Then install the TailwindCSS Typography plugin. It provides a set of prose classes that provide consistently typographic patterns:

```bash
yarn add @tailwindcss/typography -D
# or
npm install -D @tailwindcss/typography
```

Now, one thing I always like to do is move the `pages` folder into `src` folder, and delete the `styles` folder from the root.

The next step will be to create the Tailwind configuration file in the root directory called `tailwind.config.js`. This file provides TailwindCSS the information it needs to correctly run in your environment.

```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx}",
    "./src/components/**/*.{js,jsx,ts,tsx}"
  ],
  darkMode: 'class',
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/typography')
  ],
}
```

When you add `darkMode: 'class'` to the configuration file, you tell TailwindCSS to include all CSS utility classes for dark mode. This enables a dark variant that you can now add as classes to your React elements like `className="bg-white dark:bg-gray-700"` and the correct class will be provided when **dark** is active on your **html** element.

# Creating a theme with React Hooks

There are many ways to approach the problem of changing themes. And with the `next-themes` implementation this becomes easier.

Run the command:

```bash
yarn add next-themes
# or
npm install next-themes
```

And then open the `src/pages/_app.tsx` file and import the `ThemeProvider` and wrap your application `Component` with it:

```javascript
import type { AppProps } from 'next/app';
import { ThemeProvider } from 'next-themes';

function MyApp({ Component, pageProps }: AppProps) {
  return (
      <ThemeProvider attribute={'class'}>
        <Component {...pageProps} />
      </ThemeProvider>
  );
}

export default MyApp
```

# Toggling between dark and light mode

Now let's create the component to do a theme switch. I'll call it `Switcher`, and since it's a component, it's located inside the `components` folder:

```javascript
// ./src/components/Switcher/index.tsx

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

export function Switcher() {
  const { theme, setTheme } = useTheme();

  const changeTheme = (event: React.MouseEvent<HTMLInputElement>) => {
    setTheme(theme === 'dark'? 'light' : 'dark');
  }

  return (
    <div className={'fixed top-1/4 -right-1 z-3'}>
      <span className={'relative inline-block'}>
          <input type={'checkbox'} id={'chk'} onClick={changeTheme} />
          <label className={'label bg-slate-900 dark:bg-white dark:shadow-gray-800 cursor-pointer'} htmlFor={'chk'}>
              Switch theme
          </label>
      </span>
    </div>
  );
}
```

Now that we have everything ready, let's build our index page:

```javascript
// .src/pages/index.tsx

import type { NextPage } from 'next';
import { Switcher } from '../components/Switcher';

const Home: NextPage = () => {
  return (
    <div className={'text-base text-black dark:text-white dark:bg-slate-900 mx-auto'}>
      <h1>Hello world!</h1>
      <Switcher />
    </div>
  );
};

export default Home;
```

And that's it, now just run the `yarn dev` command in your terminal to see the final result.

I hope this has given you an idea of how to implement light and dark modes in your application. ☀️🌙

Thank's !

Dark mode with Next.js and TailwindCSS

Author

Tags Cloud

Contact Me

Have question? Get in touch!