Home » Next.js : Light & Dark Theme Using Next.js 13 – (2023)

Next.js : Light & Dark Theme Using Next.js 13 – (2023)

July 5, 2023

Hey there, Welcome to this tutorial where I’ll show you how to create a light & dark theme using Next.js. So today I am going to show you how to create toggle light mode and dark mode in the Next.js application.

Dark mode is very popular these days, So in this video I decided to make a video on how to toggle dark mode and light mode of Next.js website. To achieve that, First make sure you have installed Node.js. If you don’t have it then go to nodejs.org and download it and install it.

You need to create a new empty folder on your desktop. Once you’ve created it, you can drag it inside the VS Code editor. Btw, we are using visual studio code editor you can use whatever you like. Open terminal and run “npx create-next-app@latest” as below

npx create-next-app@latest

You would be asked some questions and answer them exactly like below:

In this video, we will show you two methods:

Using only CSS
Using Tailwind CSS.

First, We’ll demonstrate how to create a dark and light mode using only CSS, and then we’ll move on to the Tailwind CSS method.

Using Only CSS:

So we will use the next theme library to change our theme and get the current theme, So install it.

npm install next-themes

After that we need to add ThemeProvider and wrap our layout with the ThemeProvider from next-themes.

Next, We need to add toggle button in this case I am going to use react-icons. So open up terminal and install it.

npm install react-icons

Now our UI will need to know the current theme and be able to change it. To achieve that, We have to import use theme and The useTheme hook provides theme information:

You will notice that theme is changing. Its cool because it is the default behavior of next-themes. Additionally, you will notice that in dark mode, by default the text color is white and the background color is black in the dark mode.

If you want to change any background color or something, we need to add [data-theme=”dark”] like below:

Video Tutorial :

Using Tailwind CSS

Now, I will show you how to use next-theme in Tailwind CSS. So what I’m gonna do is actually create a new Fresh next.js application with Tailwind CSS. Make sure you have selected Yes for Tailwind CSS.

When using tailwindcss we need to pass for this ThemeProvider a props called attribute and as a value for that we want to pass in class like below:

Add “darkMode” inside tailwind.config.js file:

Now you can now easily change the colors of your website elements with Tailwind CSS. Just use the syntax “dark:g-blue700” to give your design a cool look. It’s a fantastic feature that adds a new dimension to your web development projects. With a few simple adjustments, you can switch between different colors and make your website more visually appealing for users.