Home
UI-Templates
Animated Light/Dark Mode Toggle

Animated Light/Dark Mode Toggle

👉🏻3D glow effects on knob & track 👉🏻Gradient transitions that look holographic 👉🏻Animated pulse when active 👉🏻Dark background gradient instead of a flat color 👉🏻Emoji swap (☀️ → 🌙)

This tailwind example is contributed by UI-Templates, on 13-Oct-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example is Transitions

Button Gradient Animation

Author UI-Templates

212

Fork Fullscreen

<div class="flex flex-col items-center space-y-6">
    <h1 class="text-4xl font-extrabold tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-indigo-500 to-cyan-400">
      Dark Mode UI Toggle
    </h1>

<label class="relative inline-flex items-center cursor-pointer">
      <input id="theme-toggle" type="checkbox" class="sr-only">
      <div class="toggle-track w-14 h-[46px] rounded-full">
        <div class="toggle-btn flex items-center justify-center text-white text-sm font-bold">
          ☀️
        </div>
      </div>
    </label>

<p class="text-sm opacity-80 font-mono">
      Toggle between <span class="text-indigo-500">Light</span> and <span class="text-cyan-400">Dark</span> mode
    </p>
  </div>

// Load saved theme
    if (localStorage.theme === 'dark') {
      html.classList.add('dark');
      toggle.checked = true;
      knob.innerHTML = '🌙';
    }

// Toggle theme
    toggle.addEventListener('change', () => {
      if (toggle.checked) {
        html.classList.add('dark');
        localStorage.theme = 'dark';
        knob.innerHTML = '🌙';
      } else {
        html.classList.remove('dark');
        localStorage.theme = 'light';
        knob.innerHTML = '☀️';
      }
    });
  </script>

<a href="https://discord.gg/95CveWrbK8"
   target="_blank"
   rel="noopener"
   class="absolute bottom-4 right-4 flex items-center gap-2 text-white px-4 py-2 rounded-full shadow-lg hover:bg-indigo-500 transition-all duration-300 z-50 backdrop-blur-md">
  
  <span class="text-sm font-medium">Made by Chandrika</span>

Related Examples