Skip to content

Instantly share code, notes, and snippets.

@omego

omego/Darkmode toggle using Tailwindcss in Vue 3.md

Created October 23, 2022 14:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save omego/c24d8b3f29e354b52d72e37ef20f437f to your computer and use it in GitHub Desktop.
Save omego/c24d8b3f29e354b52d72e37ef20f437f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Darkmode toggle using Tailwindcss in Vue 3.md

Based on sjones6 Gist

const isDark = ref();
isDark.value = localStorage.getItem('darkMode') == 'true';
function toggleDarkMode() {
  isDark.value = !isDark.value;
  localStorage.setItem('darkMode', isDark.value);
}
<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