Next.js Theme Implementation: Everything You Need to Know

In the modern web development landscape, creating a dynamic and responsive user experience is paramount. One way to achieve this is through theme customization in Next.js.

This blog will delve into the intricacies of setting up themes in a Next.js project, focusing on dark mode implementation, theme providers, and other essential elements.

Introduction to Next.js Themes

Next.js themes allow developers to create versatile and dynamic web applications. Utilizing themes can significantly enhance the user experience by providing options like dark mode and light mode. This blog will guide you through the process of setting up themes in Next.js using Next themes and other related packages.

Setting Up Next.js Themes

Initial Setup

To begin, create a new Next.js project or use an existing one. Ensure you have Node.js and npm installed. In your project folder, run the following command to set up Next.js:

Copy
1npx create-next-app my-next-theme-app
2cd my-next-theme-app

Installing Required Packages

Next, install the necessary packages for theme management. The next-themes library is highly recommended for handling themes in Next.js.

Copy
1npm install next-themes

Creating the ThemeProvider Component

The ThemeProvider component is crucial for managing themes in your application. It provides context for the current theme and enables theme switching.

Create a ThemeProvider component in the components folder:

Copy
1// components/ThemeProvider.js
2import { ThemeProvider as NextThemesProvider } from 'next-themes';
3import { useEffect, useState } from 'react';
4
5const ThemeProvider = ({ children }) => {
6  const [mounted, setMounted] = useState(false);
7
8  useEffect(() => {
9    setMounted(true);
10  }, []);
11
12  if (!mounted) return null;
13
14  return (
15    <NextThemesProvider attribute="class">
16      {children}
17    </NextThemesProvider>
18  );
19};
20
21export default ThemeProvider;

Modifying _app.js

Update your _app.js file to include the ThemeProvider component. This ensures that the theme context is available throughout your application.

Copy
1// pages/_app.js
2import ThemeProvider from '../components/ThemeProvider';
3import '../styles/globals.css';
4
5function MyApp({ Component, pageProps }) {
6  return (
7    <ThemeProvider>
8      <Component {...pageProps} />
9    </ThemeProvider>
10  );
11}
12
13export default MyApp;

Adding Dark Mode Styles

To support dark mode, you need to define CSS for both dark and light themes. Here, we use Tailwind CSS for simplicity. First, install Tailwind CSS:

Copy
1npm install tailwindcss postcss autoprefixer
2npx tailwindcss init -p

Configure Tailwind CSS to support dark mode by editing tailwind.config.js:

Copy
1// tailwind.config.js
2module.exports = {
3  darkMode: 'class', // or 'media' or 'class'
4  content: [
5    './pages/**/*.{js,ts,jsx,tsx}',
6    './components/**/*.{js,ts,jsx,tsx}',
7  ],
8  theme: {
9    extend: {},
10  },
11  plugins: [],
12};

Add global styles in globals.css:

Copy
1/* styles/globals.css */
2@tailwind base;
3@tailwind components;
4@tailwind utilities;
5
6body {
7  @apply bg-white text-black;
8}
9
10.dark body {
11  @apply bg-gray-900 text-white;
12}

Implementing a Theme Switcher

Now, let's add a simple theme switcher to toggle between dark and light modes. Create a ThemeSwitcher component:

Copy
1// components/ThemeSwitcher.js
2import { useTheme } from 'next-themes';
3
4const ThemeSwitcher = () => {
5  const { theme, setTheme } = useTheme();
6
7  return (
8    <button
9      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
10    >
11      Switch to {theme === 'dark' ? 'light' : 'dark'} mode
12    </button>
13  );
14};
15
16export default ThemeSwitcher;

Include this component in your layout or a specific page:

Copy
1// pages/index.js
2import ThemeSwitcher from '../components/ThemeSwitcher';
3
4export default function Home() {
5  return (
6    <div>
7      <h1>Welcome to My Next.js App</h1>
8      <ThemeSwitcher />
9    </div>
10  );
11}

Managing Themes and Their Features

Using the useTheme Hook

The useTheme hook provided by next-themes allows you to access and control the current theme. This hook is particularly useful for creating custom theme switchers and other dynamic components.

Copy
1import { useTheme } from 'next-themes';
2
3const CustomComponent = () => {
4  const { theme, setTheme } = useTheme();
5
6  return (
7    <div>
8      <p>Current theme: {theme}</p>
9      <button onClick={() => setTheme('dark')}>Dark Mode</button>
10      <button onClick={() => setTheme('light')}>Light Mode</button>
11    </div>
12  );
13};

Creating Theme-Specific Components

You can create components that adapt to the current theme. This is particularly useful for enhancing the user experience and ensuring consistency across your application.

Copy
1const ThemedButton = () => {
2  const { theme } = useTheme();
3
4  return (
5    <button className={theme === 'dark' ? 'bg-gray-700 text-white' : 'bg-white text-black'}>
6      Themed Button
7    </button>
8  );
9};

Conclusion

Implementing themes in Next.js can significantly enhance your application's user experience. By leveraging the power of next themes, ThemeProvider components, and the useTheme hook, you can create a dynamic and responsive web app that caters to both light and dark mode preferences. Ensure you follow best practices and optimize for SEO and performance to deliver the best possible user experience.