This is a Next.js project bootstrapped with create-next-app
.
It will be a lie to say everyone likes bright staff, abit dim or darkness is convenient for others who are trying to use your system. here is how you can add dark/light mode or theme in [Next Js]. The set up is simple, follow through the steps below.
First, to run the project after cloning, do the following:
#install dependencies
npm i
#spin the development server
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
Open http://localhost:3000 with your browser to see the result.
If you can see the following screens, you made it! congrats 🎉
Demo
-
Initialize your project
npx create-next-app
and choose to add tailwindcss to avoid adding it manually -
In your tailwind.config.ts file, inside the module.exports add
darkMode: 'class',
-
In your globals.css make sure you have these three tailwind classes:
- @tailwind base;
- @tailwind components;
- @tailwind utilities;
-
Once everything looks in order, its time to install the next-themes package by running
npm i next-themes
in the root folder of your project.
- Next, wrap your
<Component {...pageProps} />
with<ThemeProvider>
from next-themes you just installed inside the_app.tsx
if using TypeScript like me, if not then in_app.js
It should look something like this:
import '@/styles/globals.css'
import { ThemeProvider } from 'next-themes'
import type { AppProps } from 'next/app'
export default function App({ Component, pageProps }: AppProps) {
return (
<ThemeProvider enableSystem={true} attribute='class'>
<Component {...pageProps} />
</ThemeProvider>
)
}
Notice that enableSystem
is set to true saying that by default the theme to be activated once the application gets loaded is system's default theme i.e Light or Dark Mode. Also attribute
is set to class
just like the darkMode: class we set in the config file for tailwind.
- [Optional] I installed react-icons package as well for icons.
That's all, please feel free to tell what you think of this approach. also I would feel encouraged if you could give it a star 😉✨ but nonetheless your support, contributions and feedback are welcome!
- Find me on LinkedIn /in/James Kamwendo or email me
- You can also follow me on GitHub /James-kamwendo