<template>
  <n-button
    quaternary
    @click="activeChange"
  >
    <template #icon>
      <Icon
        :name="
          settingsStore.isDark
            ? 'LineMdMoonAltLoop'
            : 'LineMdMoonAltToSunnyOutlineLoopTransition'
        "
      />
    </template>
  </n-button>
</template>
<script setup lang="ts">
  import { Icon } from "@/components/icon";
  import { useSettingsStore } from "@/stores/settings";
  const settingsStore = useSettingsStore();
  const activeChange = () => {
    settingsStore.toggleTheme();
  };
</script>
