<script setup lang="ts">
import { Moon, Sun } from 'lucide-vue-next'
import { useColorMode } from '@vueuse/core'

const mode = useColorMode()
</script>

<template>
  <UiButton
    variant="ghost"
    size="icon"
    class="h-9 w-9"
    @click="mode = mode === 'dark' ? 'light' : 'dark'"
  >
    <Sun
      class="h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
    />
    <Moon
      class="absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
    />
    <span class="sr-only">切换主题</span>
  </UiButton>
</template>
