ThemeSwitcher.astro

---
import { Icon } from "astro-icon/components";
---

<button>
  <Icon
    x-cloak
    x-data="{ show: document.documentElement.classList.contains('dark') }"
    x-init=`
      const observer = new MutationObserver(() => {
        show = document.documentElement.classList.contains('dark');
      });
      observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
    `
    x-show="show"
    name="heroicons:sun"
    class="size-4 text-yellow duration-hover hover:text-dark-yellow md:size-5 lg:size-6"
    @click="document.documentElement.classList.toggle('dark', false); localStorage.setItem('mode', 'light');"
  />

  <Icon
    x-cloak
    x-data="{ show: !document.documentElement.classList.contains('dark') }"
    x-init=`
      const observer = new MutationObserver(() => {
        show = !document.documentElement.classList.contains('dark');
      });
      observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
    `
    x-show="show"
    name="heroicons:moon"
    class="size-4 text-light-blue duration-hover hover:text-blue dark:hidden md:size-5 lg:size-6"
    @click="document.documentElement.classList.toggle('dark', true); localStorage.setItem('mode', 'dark');"
  />
</button>