Skip to content

Instantly share code, notes, and snippets.

@sjones6

sjones6/tailwind-darkmode-toggle.html

Last active October 23, 2022 14:15
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save sjones6/6ef3e5754abf4c5f865acdf9b5d0f334 to your computer and use it in GitHub Desktop.
Save sjones6/6ef3e5754abf4c5f865acdf9b5d0f334 to your computer and use it in GitHub Desktop.
Download ZIP
A darkmode toggle using tailwindcss
Raw
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>
@omego
Copy link

omego commented Oct 23, 2022

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>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment