Dark Mode Toggle

I wanted to understand how the now-essential dark mode feature on modern websites actually works, so I implemented it myself from scratch.

I started by using React’s useState to manage the ’light’ and ‘dark’ themes and explored how TailwindCSS’s dark: class operates. Beyond just toggling the state, I also experimented with persisting the user’s theme preference using localStorage so that it remains even after a page refresh.

After implementing the functionality, I focused on enhancing the visual polish. I applied transition-colors for smooth background transitions when switching themes and used Framer Motion to make the toggle switch move in a more playful and engaging way.

Through this seemingly simple toggle, I was able to explore various aspects of state management, data persistence, and visual details that enhance the overall user experience.