A darkmode toggle using tailwindcss

tailwind-darkmode-toggle.html

<div class="w-14 h-8">
  <input type="checkbox" id="dark-mode-toggle" class="hidden" onchange="document.documentElement.classList.toggle('dark')" />
  <label for="dark-mode-toggle" class="w-full h-full bg-gray-800 dark:bg-white rounded-full p-1 flex justify-between cursor-pointer">
    <span class="inline dark:hidden">🌞</span>
    <span class="w-6 h-6 rounded-full bg-white dark:bg-gray-800 block float-right dark:float-left"></span>
    <span class="hidden dark:inline">🌛</span>
  </label>
</div>

Thank you for the head start, this is what i did in Vue 3:

<div
 class="py-3 px-4 text-sm text-gray-900 cursor-pointer hover:bg-gray-100 dark:hover:bg-blue-600 dark:text-gray-300"
@click="toggleDarkMode"
>
<span class="hidden dark:inline-flex"> <SunIcon class="w-5 h-5 mr-2" /> Light </span>
<span class="inline-flex dark:hidden"> <MoonIcon class="w-5 h-5 mr-2" /> Dark </span>
</div>