site-profile/src/components/buttons/ThemeToggleButton.astro

---

---

<button
  id="theme-toggle"
  data-theme-toggle
  class="group dark:hover:bg-steel/30 hover:bg-yellow-300/20 transition-all duration-300 relative rounded-full p-1.5 sm:p-2 touch-manipulation"
  aria-label="Toggle dark mode"
>
  <div class="relative flex h-5 w-5 items-center justify-center">
    <!-- Sun icon -->
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="icon-light absolute h-5 w-5 text-neutral-600 dark:text-neutral-400 scale-100 dark:scale-0 rotate-0 dark:-rotate-90 transition-all duration-500"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    >
      <circle cx="12" cy="12" r="5"></circle>
      <path
        d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"
      ></path>
    </svg>

    <!-- Moon icon -->
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="icon-dark absolute h-5 w-5 text-neutral-600 dark:text-neutral-400 scale-0 dark:scale-100 rotate-90 dark:rotate-0 transition-all duration-500"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    >
      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
    </svg>
  </div>
</button>

<script is:inline>
  const applyTheme = () => {
    const isDark =
      localStorage.theme === 'dark' ||
      (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches);
    document.documentElement.classList.toggle('dark', isDark);
  };

  applyTheme();

  document.addEventListener('astro:after-swap', applyTheme);
</script>

<script>
  function setupThemeToggle() {
    const themeToggles = document.querySelectorAll('[data-theme-toggle]');

    // Create theme switch overlay element
    if (!document.querySelector('.theme-switch-overlay')) {
      const overlay = document.createElement('div');
      overlay.className = 'theme-switch-overlay fixed inset-0 pointer-events-none z-50';
      overlay.style.opacity = '0';
      overlay.style.transition = 'opacity 0.3s ease-out';
      document.body.appendChild(overlay);
    }

    themeToggles.forEach((toggle) => {
      ['click', 'touchend'].forEach((eventType) => {
        toggle.addEventListener(
          eventType,
          (e) => {
            e.preventDefault();
            e.stopPropagation();

            // Get click/touch position for radial animation
            let x, y;
            if (e.type === 'touchend' && e.changedTouches && e.changedTouches[0]) {
              const rect = toggle.getBoundingClientRect();
              x = e.changedTouches[0].clientX - rect.left;
              y = e.changedTouches[0].clientY - rect.top;
            } else {
              const rect = toggle.getBoundingClientRect();
              x = e.clientX - rect.left;
              y = e.clientY - rect.top;
            }

            document.documentElement.style.setProperty('--x', `${x}px`);
            document.documentElement.style.setProperty('--y', `${y}px`);

            const overlay = document.querySelector('.theme-switch-overlay');
            const isDark = document.documentElement.classList.contains('dark');
            const newTheme = isDark ? 'light' : 'dark';

            // Show overlay during transition
            if (overlay) {
              overlay.style.backgroundColor =
                newTheme === 'dark' ? 'rgba(24, 24, 27, 0.3)' : 'rgba(255, 255, 255, 0.3)';
              overlay.style.opacity = '1';
            }

            document.documentElement.classList.add('theme-switching');

            // Force a reflow to ensure all elements update
            document.body.offsetHeight;

            // Toggle dark mode with a slight delay to allow overlay to appear
            setTimeout(() => {
              if (isDark) {
                document.documentElement.classList.remove('dark');
              } else {
                document.documentElement.classList.add('dark');
              }

              localStorage.setItem('theme', newTheme);
              document.dispatchEvent(
                new CustomEvent('themeChanged', {
                  detail: { isDark: newTheme === 'dark' },
                })
              );

              // Force another reflow to ensure all elements update
              document.body.offsetHeight;

              setTimeout(() => {
                if (overlay) {
                  overlay.style.opacity = '0';
                }
                document.documentElement.classList.remove('theme-switching');
              }, 300);
            }, 50);
          },
          { passive: false }
        );
      });
    });
  }

  // Run setup on load
  document.addEventListener('astro:page-load', setupThemeToggle);

  // Also run on page visibility change to ensure theme is consistent
  document.addEventListener('visibilitychange', () => {
    if (document.visibilityState === 'visible') {
      const currentTheme = localStorage.getItem('theme');
      if (currentTheme === 'dark') {
        document.documentElement.classList.add('dark');
      } else if (currentTheme === 'light') {
        document.documentElement.classList.remove('dark');
      }
    }
  });

  // Listen for system preference changes
  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', ({ matches }) => {
    if (!localStorage.getItem('theme')) {
      if (matches) {
        document.documentElement.classList.add('dark');
      } else {
        document.documentElement.classList.remove('dark');
      }
    }
  });
</script>

<style>
  /* Subtle hover animation */
  #theme-toggle {
    transform: translateY(0);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
    min-height: 32px;
    min-width: 32px;
  }

  @media (hover: hover) {
    #theme-toggle:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    :global(:root:not(.dark)) #theme-toggle:hover .icon-light {
      filter: drop-shadow(0 0 2px rgba(251, 191, 36, 0.6));
      transform: scale(1.1) rotate(15deg);
    }

    :global(:root.dark) #theme-toggle:hover .icon-dark {
      filter: drop-shadow(0 0 2px rgba(129, 140, 248, 0.6));
      transform: scale(1.1) rotate(-15deg);
    }
  }

  /* Optimize animations for mobile */
  @media (prefers-reduced-motion: reduce) {
    .icon-light,
    .icon-dark {
      transition: all 0.2s ease-out !important;
    }

    #theme-toggle,
    #theme-toggle:hover {
      transform: none;
      transition: none;
    }
  }

  /* Adjust size for very small screens */
  @media (max-width: 320px) {
    #theme-toggle {
      padding: 0.25rem !important;
    }
  }
</style>