MrleeAdmin/frontend/web/app/layouts/components/dark-switch.vue

<template>
    <div class="theme-toggle-content" @click="toggleDark">
        <div class="switch">
            <div class="switch-action">
                <Icon icon="ant-design:moon-outlined" color="#ffffff" size="13px" class="switch-icon dark-icon" />
                <Icon icon="ant-design:sun-outlined" color="#303133" size="13px" class="switch-icon light-icon" />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { Icon } from '~/components/icon'
import { getDark, setDark } from '~/utils/dark'

const isDark = computed(() => getDark())

function toggleDark() {
  setDark(!isDark.value)
}

</script>

<style scoped lang="scss">
.theme-toggle-content {
    display: flex;
    align-items: center;
    height: 24px;
    padding: 0 12px;
}
.switch {
    display: inline-block;
    position: relative;
    width: 40px;
    height: 20px;
    border: 1px solid var(--el-border-color);
    border-radius: 10px;
    box-sizing: border-box;
    background-color: var(--ma-bg-color);
    cursor: pointer;
    transition:
        border-color 0.3s,
        background-color 0.5s;
}
.switch-action {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 1px;
    left: 1px;
    border-radius: 50%;
    background-color: #ffffff;
    transform: translate(0);
    color: var(--el-text-color-primary);
    transition: all 0.3s;
}
.switch-icon {
    position: absolute;
    left: 1px;
    transition: all 0.3s;
    cursor: pointer;
}
.light-icon {
    opacity: 1;
}
.dark-icon {
    opacity: 0;
}

@at-root html.dark {
    .switch {
        background-color: #2c2c2c;
    }
    .switch-action {
        transform: translate(20px);
        background-color: #141414;
    }
    .dark-icon {
        opacity: 1;
    }
    .light-icon {
        opacity: 0;
    }
}
</style>