Hello Devs,

Nowadays, one feature that you will see in almost all sites specially in blogs is theme switching specifically dark mode.

And that's what we are building today. [Dark Mode in NextJs page with Tailwind and Shadcn-UI]

So, let's dive in to build our third frontend feature.

What are we building?

Live preview with code: https://stackblitz.com/edit/stackblitz-starters-adalin?file=app%2Fpage.tsx​

Philosophy.

First, let's understand the philosophy and basic system design behind adding dark mode to a web page.

As frontend engineers we should provide our users the best experience possible. Readability and simplicity are extremely important. There is no point in creating the best animation in the world which leaves your user confused.

Dark mode provides relief to user's eyes. You yourself as a developer must be using dark theme of VS-Code. Then why deprive your users from that experience.

System Design.

You must have seen the color wheel.

Color wheel provides a complimentary color for each primary color. You will use the color wheel if you are building multiple themes on your page.

But for our purpose we only care about two colors white (primary) and black (secondary). I have oversimplified the design by saying white (primary) and black (secondary) colors.

Actually we will be using different shades of those colors using hue and saturation as you will see later.

We will predefine all our primary and their respective secondary colors and whenever user switches to dark mode all we have to do is switch the primary and secondary colors being used in our code.

Let the coding begin.

Let's start by creating a new NextJs project using create-next-app. Create-next-app is equivalent to create-react-app but for NextJs.

This will create a new NextJs project named `nextDark` with typescript and tailwind already configured for us. Now replace the default content in `app/page.tsx` with the following code.

The button you see in above code is not a regular button it is a shadcn-ui component. Shadcn is a UI components library. Let's add it to our project.

Run the following two commands in your terminal. Run them one by one.

The first command installs shadcn-ui, its dependencies latest version. Sets up the project configuration like tailwind.config.ts and `app/globals.css`.

The second command add the button component in `components/ui/button.tsx`.

Ok, our home page is ready to go.

See the globals.css file, it is modified by shadcn-ui. It contains some interesting configurations.

The class `.dark` defines secondary color for each respective primary color. Check the global css file and explore the primary and their secondary colors for a while. This makes our job to switch to light/dark mode very easy.

Adding dark mode.

Install `next-themes`. Next-themes provides a wrapper to wrap the part of application where we want theme switching. We will wrap our entire application.

Create theme provider (the wrapper). Create a new file `theme-provider.tsx` and paste the following code.

Make sure to add "use client" at top of the file because this must be a client component not server component. Then we import ThemeProvider from "next-themes" and return it with children.

Next let's wrap the root layout with ThemeProvider. `app/layout.tsx` is again a special file in NextJs. The style and content in layout is applied to the entire app.

So, wrapping layout with ThemeProvider will add theme-switching to the entire app.

Okay, now all we need to do is add a theme toggle button. Notice in the above code there is a component `<ModeToggle />`. Let's create that component and we will be done.

The above code adds a dropdown menu to switch between light, dark, and system. The dropdown is a shadcn-ui component. So let's add that component to our project.

Run the following command.

This will add dropdown-menu component in `component/ui/dropdown-menu.tsx`.

Break down of few important things in mode-toggle.jsx:

• setTheme sets the theme (light, dark, or system) in the provider so that it is accessible to entire app.
• The tailwindCSS of Sun and Moon elements.
  • Sun (scale-100 dark:scale-0): Sun icon width becomes 0 when theme is dark so that it is not visible in dark mode.
  • Moon (scale-0 dark:scale-100): Moon icon width becomes 100% when theme is dark so that is is visible in dark mode.
  • And vice versa.

Cool, now go ahead and try to switch the theme.

Congrats!

Oh wait, what? It is not working. Ya, it won't work because we have a little bug.

Gotcha

Right now the theme switching won't work because of a small bug.

See we are using `tsx` and `jsx` both in our application. But NextJs was initiated with typescript configurations so tailwind ignores our jsx files. Just add the js and jsx in tailwind config.

And that is it.

Now our theme switching is working perfectly fine. You can check the final project at the preview link provided at top.

Your users are gonna love you for giving them a dark mode.

Reply to this email, if you have any suggestion on which feature should I build next.