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
Top comments (0)