# NextJS Theme Mode Toggle

In every project, I have a hard time deciding where to place the theme toggle and how to design it. It may seem simple, and many might not think much of it, but I know there are others out there who share my obsession. So, I'm determined to resolve this once and for all.  
  
Like all of you I also browse the web a lot and seeing all kinds of designs and I think I’ve seen every kind of implementation of this. However I’ve decided the best way of implementing this is using radio inputs and for the design aspect I like the way vercel handles it.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1729198819038/684c0adb-b189-4af8-b9d8-d26e4097ce27.png align="center")

  
It looks quite good right?  
  
Let’s check how does my implementation looks like.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1729198905526/c99caf01-a35d-41df-aadb-58ab5ffdb718.png align="center")

Well… I guess that could be better, because the border of the icon and the border of the surrounding div don’t align. Still, it’s good enough, and I’ll leave it to you to fix it. 🤓

%[https://gist.github.com/ozdemirrulass/5bc2007cf681c881507c47316e3160cc] 

I think the packages I use is quite clear in the gist but if you are confused check the following links:  
  
[https://tailwindcss.com/docs/guides/nextjs](https://tailwindcss.com/docs/guides/nextjs)  
[https://github.com/pacocoursey/next-themes](https://github.com/pacocoursey/next-themes)  
[https://lucide.dev](https://lucide.dev)  
  
If you are using shadcn this would be enough:  
  
[https://ui.shadcn.com/docs/dark-mode/next](https://ui.shadcn.com/docs/dark-mode/next)