newechoes/src/components/ThemeToggle.astro

---
interface Props {
  height?: number;
  width?: number;
  fill?: string;
  className?: string;
}

const { 
  height = 16, 
  width = 16, 
  fill = "currentColor", 
  className = "" 
} = Astro.props;
---

<button
  id="theme-toggle-button"
  class={`inline-flex items-center justify-center h-8 w-8 cursor-pointer rounded-md hover:bg-gray-100 dark:hover:bg-gray-700/50 text-secondary-600 dark:text-secondary-400 hover:text-primary-600 dark:hover:text-primary-400 ${className}`}
  aria-label="切换主题"
  role="button"
  tabindex="0"
>
  <!-- 月亮图标 (暗色模式) -->
  <svg
    id="dark-icon"
    style={`height: ${height}px; width: ${width}px;`}
    fill={fill}
    viewBox="0 0 16 16"
    class="hover:scale-110 hidden dark:block"
    aria-hidden="true"
  >
    <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/>
  </svg>
  
  <!-- 太阳图标 (亮色模式) -->
  <svg
    id="light-icon"
    style={`height: ${height}px; width: ${width}px;`}
    fill={fill}
    viewBox="0 0 16 16"
    class="hover:scale-110 block dark:hidden"
    aria-hidden="true"
  >
    <path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>
  </svg>
</button>

<script>
  function setupThemeToggle() {
    // 获取所有主题切换按钮
    const themeToggleButtons = document.querySelectorAll('#theme-toggle-button');
    
    if (!themeToggleButtons.length) {
      return;
    }
    
    let transitioning = false;
    let transitionTimeout: number | null = null;
    
    // 获取系统首选主题
    const getSystemTheme = () => {
      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
    };
    
    // 切换主题
    const toggleTheme = () => {
      if (transitioning) {
        return;
      }
      
      transitioning = true;
      
      // 获取当前主题
      const currentTheme = document.documentElement.dataset.theme;
      const newTheme = currentTheme === 'light' ? 'dark' : 'light';
      
      // 更新 HTML 属性
      document.documentElement.dataset.theme = newTheme;
      
      // 更新本地存储
      const isSystemTheme = newTheme === getSystemTheme();
      
      if (isSystemTheme) {
        localStorage.removeItem('theme');
      } else {
        localStorage.setItem('theme', newTheme);
      }
      
      // 添加防抖
      if (transitionTimeout) {
        clearTimeout(transitionTimeout);
      }
      
      transitionTimeout = setTimeout(() => {
        transitioning = false;
      }, 300) as unknown as number;
    };
    
    // 监听系统主题变化
    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
    
    const handleMediaChange = (e: MediaQueryListEvent) => {
      // 只有当主题设置为跟随系统时才更新主题
      if (!localStorage.getItem('theme')) {
        const newTheme = e.matches ? 'dark' : 'light';
        document.documentElement.dataset.theme = newTheme;
      }
    };
    
    mediaQuery.addEventListener('change', handleMediaChange);
    
    // 存储事件处理函数引用，用于清理
    const clickHandlers = new Map();

    // 为每个按钮添加点击事件
    themeToggleButtons.forEach(button => {
      const handler = (e: Event) => {
        // 阻止事件冒泡
        e.stopPropagation();
        toggleTheme();
      };
      
      clickHandlers.set(button, handler);
      button.addEventListener('click', handler);
      
      // 恢复键盘事件
      button.addEventListener('keydown', function(e) {
        const keyEvent = e as KeyboardEvent;
        if (keyEvent.key === 'Enter' || keyEvent.key === ' ') {
          e.preventDefault();
          toggleTheme();
        }
      });
    });
    
    // 处理移动端主题切换容器
    let containerHandler: ((e: Event) => void) | null = null;
    const themeToggleContainer = document.getElementById('theme-toggle-container');
    if (themeToggleContainer) {
      containerHandler = (e) => {
        const target = e.target as HTMLElement;
        // 如果点击的不是主题切换按钮本身，则手动触发主题切换
        if (target.id !== 'theme-toggle-button' && !target.closest('#theme-toggle-button')) {
          e.stopPropagation();
          toggleTheme();
        }
      };
      themeToggleContainer.addEventListener('click', containerHandler);
    }
    
    // 清理
    return () => {
      mediaQuery.removeEventListener('change', handleMediaChange);
      
      // 清理按钮事件
      themeToggleButtons.forEach(button => {
        const handler = clickHandlers.get(button);
        if (handler) {
          button.removeEventListener('click', handler);
        }
      });
      
      // 清理容器事件
      if (themeToggleContainer && containerHandler) {
        themeToggleContainer.removeEventListener('click', containerHandler);
      }
      
      if (transitionTimeout) {
        clearTimeout(transitionTimeout);
      }
    };
  }
  
  // 页面加载时初始化
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', setupThemeToggle);
  } else {
    setupThemeToggle();
  }
  
  // 支持 Astro 视图转换
  document.addEventListener('astro:after-swap', setupThemeToggle);
  document.addEventListener('astro:page-load', setupThemeToggle);
</script>