From the course: Next.js Ecommerce: Build a Shopping Platform from Scratch

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Theme mode toggle

Theme mode toggle - Next.js Tutorial

From the course: Next.js Ecommerce: Build a Shopping Platform from Scratch

Start my 1-month free trial Buy for my team

Theme mode toggle

“

So now we're going to work on the mode toggle. So if we look at the final version here, we have this dropdown where we can select the dark theme, the light theme, or the system theme. So we're going to implement that. And the way that that works is with a package called Next Themes. So we need to install that. Also, to get this dropdown effect, we need to install the dropdown menu from ShadCNUI. All right, so let's jump over here. Now, one other thing that I forgot to do is the sign-in button. I actually don't want to have that the ghost style. I want it to be dark like this, so back in the header component, so shared header index, where we have the second button for the sign-in, I'm going to get rid of the variant so that it has the dark background. All right, now let's install the two things we need. So one is going to be npm install next-themes. That allows us to control the theme. And then we want to run npx shad-cn at latest add. And then it's going to be dropdown-menu. And this…

Contents