<template>
  <el-switch v-model="isDark" :active-action-icon="Moon" :inactive-action-icon="Sunny" inline-prompt
    @change="onToggle" />
</template>

<script setup lang="ts">
import { Sunny, Moon } from '@element-plus/icons-vue'
import { isDark, toggleTheme } from '@/composables/useTheme'

function onToggle() {
  // 可选：添加过渡动画
  document.documentElement.classList.add('theme-transition')
  toggleTheme()
  setTimeout(() => {
    document.documentElement.classList.remove('theme-transition')
  }, 400)
}
</script>
