Easy way to use Dark Mode with custom style in Next.js + Tailwind

Neeraj M R — Wed, 02 Feb 2022 13:45:37 +0000

I was building my porfolio website in Nextjs using Tailwind css. So I decided to implement a toggle between dark and light theme in my wesite. So I started googling it and end up with a blog post in dev.to. This is an excellent blog post. By refering this post I was able to implement this feature in 2, 3 lines of code.

But the doubt came to my mind was. How to use customised styles for dark and light themes using tailwindcss classes ?
I am a begginer to Nextjs and tailwindss, so it take me so many time to find a better solution. I coun't find any simple documentation. So I decided to write this blog post to share my solution.

Detailed article on how to implement toggled Dark and Light mode is given in this documentation.

So after implementing dark/light mode toggle. We can customize our website using theme as follows.


<h1 
className={theme === "dark" ? 'text-blue-600': 'text-rose600'
}>
Example
</h1>

That's it!! its so easy to customize the theme in our Nextjs website.

You can find me on github

DEV Community: Neeraj M R

Easy way to use Dark Mode with custom style in Next.js + Tailwind