Implementing Dark Mode in NextJS14 with Tailwind CSS

Add to your RSS feed15 May 20242 min read

1. Create a Next.js Project:

2. Install Tailwind CSS:

3. Create Tailwind Configuration:

4. Enable Dark Mode in Tailwind Configuration:

5. Create CSS File:

6. Import CSS in layout

7. Install next-themes:

8. Create a theme-provider:

9. Create a theme-switcher component:

Implementing Dark Mode with Tailwind CSS and Next.js is straightforward. You can utilize Tailwind CSS's built-in dark mode feature along with Next.js's dynamic routing to achieve this. Here's how you can do it:

1. Create a Next.js Project:

If you haven't already, create a new Next.js project using the following command:

npx create-next-app my-next-app

2. Install Tailwind CSS:

Navigate to your project directory and install Tailwind CSS along with autoprefixer and postcss:

npm install tailwindcss postcss autoprefixer

3. Create Tailwind Configuration:

Generate a default Tailwind configuration file:

npx tailwindcss init -p

4. Enable Dark Mode in Tailwind Configuration:

In your tailwind.config.js, set the darkMode property to 'class':

1 // tailwind.config.js
2 module.exports = {
3   darkMode: 'class',
4   // other configurations...
5 };

5. Create CSS File:

Create a CSS file where you'll import Tailwind CSS and define additional styles, including those for dark mode:

css

1 /* app/globals.css */
2 @import 'tailwindcss/base';
3 @import 'tailwindcss/components';
4 @import 'tailwindcss/utilities';
5 
6 /* Define dark mode styles */
7 @media (prefers-color-scheme: dark) {
8   .dark {
9     @apply dark;
10   }
11 }

6. Import CSS in layout

1 import './globals.css';

7. Install next-themes:

npm install next-themes

8. Create a theme-provider:

Create a theme-provider.tsx components inside the components or app folder:

1 'use client';
2 
3 import { ThemeProvider as NextThemesProvider } from 'next-themes';
4 import { type ThemeProviderProps } from 'next-themes/dist/types';
5 import { useEffect, useState } from 'react';
6 
7 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
8   const [mounted, setMounted] = useState(false);
9 
10   useEffect(() => {
11     setMounted(true);
12   }, []);
13 
14   if (!mounted) {
15     return <>{children}</>;
16   }
17   return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
18 }

9. Create a theme-switcher component:

1 'use client';
2 
3 import { useTheme } from 'next-themes';
4 
5 const ThemeSwitcher = () => {
6   const { theme, setTheme } = useTheme();
7   return (
8     <button
9       type='button'
10       className='hs-dark-mode-active:hidden hs-dark-mode group mr-[1em] flex items-center font-medium text-gray-600 hover:text-gray-500 dark:text-white dark:hover:text-neutral-500'
11       data-hs-theme-click-value='dark'
12       onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
13     >
14       {theme === 'light' ? (
15         <svg
16           className='size-5 flex-shrink-0'
17           xmlns='http://www.w3.org/2000/svg'
18           width='24'
19           height='24'
20           viewBox='0 0 24 24'
21           fill='none'
22           stroke='currentColor'
23           strokeWidth='1.5'
24           strokeLinecap='round'
25           strokeLinejoin='round'
26         >
27           <path d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z'></path>
28         </svg>
29       ) : (
30         <svg
31           className='size-5 flex-shrink-0'
32           xmlns='http://www.w3.org/2000/svg'
33           width='24'
34           height='24'
35           viewBox='0 0 24 24'
36           fill='none'
37           stroke='currentColor'
38           strokeWidth='2'
39           strokeLinecap='round'
40           strokeLinejoin='round'
41         >
42           <circle cx='12' cy='12' r='4'></circle>
43           <path d='M12 2v2'></path>
44           <path d='M12 20v2'></path>
45           <path d='m4.93 4.93 1.41 1.41'></path>
46           <path d='m17.66 17.66 1.41 1.41'></path>
47           <path d='M2 12h2'></path>
48           <path d='M20 12h2'></path>
49           <path d='m6.34 17.66-1.41 1.41'></path>
50           <path d='m19.07 4.93-1.41 1.41'></path>
51         </svg>
52       )}
53     </button>
54   );
55 };
56 export default ThemeSwitcher;

This setup will enable dark mode in your Next.js project using Tailwind CSS. You can customize the dark mode styles further based on your requirements

nextjs

use-theme

dark-mode

tailwindcss