<template>
  <UButton color="neutral" variant="ghost" @click="toggle">
    <UIcon :name="icon" class="w-5 h-5" />
  </UButton>
</template>

<script setup lang="ts">
const colorMode = useColorMode();
const icon = computed(() =>
  colorMode.value === "dark"
    ? "i-heroicons-moon-20-solid"
    : "i-heroicons-sun-20-solid"
);
const toggle = () => {
  colorMode.preference = colorMode.value === "dark" ? "light" : "dark";
};
</script>
