LoongPanel-Asp/web/components/ColorSwitch.vue

111 lines
2.4 KiB
Vue
Executable File

<script lang="ts" setup>
</script>
<template>
<label>
<input class="toggle-checkbox" type="checkbox" :checked="$colorMode.value == 'dark'" @click="$colorMode.preference = $colorMode.value == 'dark' ? 'light' : 'dark'">
<div class="toggle-slot">
<div class="sun-icon-wrapper">
<div class="iconify sun-icon" data-icon="feather-sun" data-inline="false"></div>
</div>
<div class="toggle-button"></div>
<div class="moon-icon-wrapper">
<div class="iconify moon-icon" data-icon="feather-moon" data-inline="false"></div>
</div>
</div>
</label>
</template>
<style lang="scss" scoped>
@import "base";
.toggle-checkbox {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.toggle-slot {
font-size: 10px;
position: relative;
height: 2em;
width: 4em;
border: 0 solid transparent;
border-radius: 10em;
background-color: $light-bg-underline-color;
transition: background-color 250ms;
cursor: pointer;
overflow: hidden;
}
.toggle-checkbox:checked ~ .toggle-slot {
background-color: #374151;
}
.toggle-button {
transform: translate(0.3em, 0.25em);
position: absolute;
height: 1.5em;
width: 1.5em;
border-radius: 50%;
background-color: #ffeccf;
box-shadow: inset 0px 0px 0px 0.75em #ffbb52;
transition: background-color 250ms, border-color 250ms, transform 500ms cubic-bezier(.26,2,.46,.71);
}
.toggle-checkbox:checked ~ .toggle-slot .toggle-button {
background-color: #485367;
box-shadow: inset 0px 0px 0px 0.75em white;
transform: translate(2em, 0.25em);
}
.sun-icon {
position: absolute;
height: 3em;
width: 3em;
color: #ffbb52;
}
.sun-icon-wrapper {
position: absolute;
height: 3em;
width: 3em;
opacity: 1;
transform: translate(1em, 1em) rotate(15deg);
transform-origin: 50% 50%;
transition: opacity 150ms, transform 500ms cubic-bezier(.26,2,.46,.71);
}
.toggle-checkbox:checked ~ .toggle-slot .sun-icon-wrapper {
opacity: 0;
transform: translate(1.5em, 1em) rotate(0deg);
}
.moon-icon {
position: absolute;
height: 3em;
width: 3em;
color: white;
}
.moon-icon-wrapper {
position: absolute;
height: 6em;
width: 6em;
opacity: 0;
transform: translate(1.5em, 1em) rotate(0deg);
transform-origin: 50% 50%;
transition: opacity 150ms, transform 500ms cubic-bezier(.26,2.5,.46,.71);
}
.toggle-checkbox:checked ~ .toggle-slot .moon-icon-wrapper {
opacity: 1;
transform: translate(1em, 1em) rotate(-15deg);
}
</style>