ThemeSwitcher.astro

---
/**
 * Theme Switcher Component
 * Allows users to toggle between light and dark themes
 * Persists theme preference to localStorage
 */
import './ThemeSwitcher.css';
import { BodyMd } from '@/components/primitives';
import { Icon } from 'astro-icon/components';
import { getLangFromUrl, useTranslations } from '@/i18n/utils';

interface Props {
  showLabels?: boolean;
}

const { showLabels = true } = Astro.props;
const lang = getLangFromUrl(Astro.url);
const t = useTranslations(lang);
---

<button data-theme-toggle class="toggle" aria-label={t('theme.toggle')}>
  <div class="toggle-icon">
    <Icon
      name="fluent:weather-moon-16-regular"
      class="moon"
      size="20"
      color="var(--color-icon-primary)"
    />
    <Icon
      name="fluent:weather-sunny-16-regular"
      class="sun"
      size="20"
      color="var(--color-icon-primary)"
    />
  </div>
  <BodyMd
    vMargin={false}
    class={`label-dark ${!showLabels ? 'sr-only' : ''}`}
    aria-label={t('theme.switchToLight')}>{t('theme.switchToLight')}</BodyMd
  >
  <BodyMd
    vMargin={false}
    class={`label-light ${!showLabels ? 'sr-only' : ''}`}
    aria-label={t('theme.switchToDark')}>{t('theme.switchToDark')}</BodyMd
  >
</button>

<script>
  // record frame requests
  let rafHandle = 0;

  const handleToggleClick = () => {
    const root = document.documentElement;
    const nextTheme = root.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';

    // Cancel any pending frame requests to prevent race conditions during rapid clicks
    if (rafHandle) {
      cancelAnimationFrame(rafHandle);
    }

    // Disable transitions
    root.classList.add('disable-transitions');

    // Apply theme
    root.setAttribute('data-theme', nextTheme);
    localStorage.setItem('theme', nextTheme);

    // Wait for the browser to paint the new theme without transitions, then re-enable
    // them. Double requestAnimationFrame ensures this happens after a full frame.
    rafHandle = requestAnimationFrame(() => {
      rafHandle = requestAnimationFrame(() => {
        root.classList.remove('disable-transitions');
        rafHandle = 0;
      });
    });
  };

  document.querySelectorAll('[data-theme-toggle]').forEach((button) => {
    button.addEventListener('click', handleToggleClick);
  });
</script>