---
// 黑暗模式过渡组件 - 提供平滑过渡的CSS
---

<style is:global>
  :root {
    --transition-duration: 0.3s;
  }

  html {
    transition: background-color var(--transition-duration) ease,
                color var(--transition-duration) ease;
  }

  body * {
    transition: background-color var(--transition-duration) ease,
                color var(--transition-duration) ease,
                box-shadow var(--transition-duration) ease;
  }
  
  /* 防止某些元素过渡 */
  .no-transition,
  .no-transition * {
    transition: none !important;
  }
  
  /* 响应用户减少动画的设置 */
  @media (prefers-reduced-motion: reduce) {
    html, body * {
      transition: none !important;
    }
  }
</style> 