When implementing websites, dark mode is rarely used for corporate sites, but we'll implement it for other common cases using Next.js and Tailwind CSS.
Implementing Dark Mode with Next.js and Tailwind CSS
2025-11-23
Create a Next.js project
First, create a Next.js project.
sh
During setup, you'll be prompted to confirm the project name and whether the default settings are acceptable. Since Tailwind CSS is applied by default, we'll proceed by selecting Yes this time.
text
Once created, run the project.
sh
It executed successfully.
Add icon library
Implement the mode switch button as a component. For the icons used in this component, we will utilize Lucide React this time.
Execute the following command.
sh
You can now use the icon on your site.
Adding Components
Next, add components. Create a components folder and create the following file as ThemeSwitcher.tsx.
components/ThemeSwitcher.tsx
Next, to enable dark mode in the stylesheet, add the code from the second line of the sample below to globals.css.
app/globals.css
The component is now ready.
Implement icons on the page
Ideally, buttons should be placed in the navigation, but since this is only for testing functionality, we'll add the code to pages.tsx. Place the component before the main component and import the newly created component.
app/page.tsx
The buttons have been placed. Let's run it.
sh
Pressing the button as shown below will now switch the mode.
Summary
Implementing dark mode isn't particularly difficult, and since official samples exist, the barrier to entry is low. However, since this task arises every time a site is built, I compiled this article with the goal of creating a reusable component.
Regarding the sample code, it is publicly available in the following repository.