NextJS Theme Mode Toggle

I am passionate about advancing towards a post-scarcity economy and deeply respect organizations that prioritize unity, diversity, and meritocracy.
Search for a command to run...

I am passionate about advancing towards a post-scarcity economy and deeply respect organizations that prioritize unity, diversity, and meritocracy.
I know right! It makes my life much easier! You're welcome. If you like working with shadcn-nextjs setup and using turborepo check this out: https://github.com/ozdemirrulass/turborepo-shadcn-ui It's a blueprint for it. I've explained a bit in the readme and I'll explain in detail as a post as soon as possible. Thanks for the kind words!
After reading Steven Fox’s post on A Hack for Efficient Infinite Scrolling in Your Livewire App I started to think on what’s been bothering me most on the Pinkary platform. As you can guess it was the broken gifs! So I’ve decided to get to the bottom...

Recently, I've published a step by step guide on Enterprise-Level Authentication in a Containerized Environment for NextJS and while searching on the internet I saw a post on Keycloak groups. benmarte was having a problem while integrating Keycloak u...

TL;DR https://github.com/ozdemirrulass/keycloak-nextjs-mysql-docker 💡 This tutorial uses Next-Auth and Next-Auth is becoming AuthJS! If you want to use AuthJS for working with latest versions checkout THIS POST This article aims to provide a step...

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.

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

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. 🤓
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://github.com/pacocoursey/next-themes
https://lucide.dev
If you are using shadcn this would be enough: