https://misosos.github.io/en/tags/darkmode/DarkModeHugo Blox Builder (https://hugoblox.com)en-usThu, 02 Oct 2025 00:00:00 +0000https://misosos.github.io/media/sharing.pnghttps://misosos.github.io/en/tags/darkmode/https://misosos.github.io/en/playground/ui-components/darkmode-toggle/Thu, 02 Oct 2025 00:00:00 +0000https://misosos.github.io/en/playground/ui-components/darkmode-toggle/<p>I wanted to understand how the now-essential dark mode feature on modern websites actually works, so I implemented it myself from scratch.</p> <p>I started by using React’s useState to manage the &rsquo;light&rsquo; and &lsquo;dark&rsquo; themes and explored how TailwindCSS’s <code>dark:</code> 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.</p> <p>After implementing the functionality, I focused on enhancing the visual polish. I applied <code>transition-colors</code> for smooth background transitions when switching themes and used Framer Motion to make the toggle switch move in a more playful and engaging way.</p> <p>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.</p>