<template>
    <div class="dark-mode-switch cursor-pointer bg-neutral-300 dark:bg-neutral-700" :class="{ active: isDark }" @click="toggleDark()" title="切换黑暗模式">
        <div class="switch-indicator absolute rounded-lg bg-white dark:bg-neutral-800 !transition-all">
            <component :is="isDark ? Moon : Sun" />
        </div>
    </div>
</template>

<script setup>
import { Sun, Moon } from '@vicons/tabler'
import { useDark, useToggle } from '@vueuse/core'
const isDark = useDark({
    storageKey: 'dark-mode-admin'
})
const toggleDark = useToggle(isDark)
</script>

<style lang="less" scoped>
.dark-mode-switch {
    width: 40px;
    height: 20px;
    border-radius: 10px;
    padding: 2px;
    box-sizing: border-box;
    position: relative;
    .switch-indicator {
        width: 16px;
        height: 16px;
        padding: 1px;
        left: 2px;
        top: 0;
        bottom: 0;
        margin: auto;
    }
    &.active {
        .switch-indicator {
            left: 22px;
        }
    }
}
</style>
