RhenCloud/Cloud-Blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update theme changer icon transation (#93)

Browse Source 
Signed-off-by: nurRiyad <asadnurriyad@gmail.com>
This commit is contained in:
Al Asad Nur Riyad
2025-12-19 01:13:09 +06:00
committed by GitHub
parent 5163e756f0
commit c58dd5a037
1 changed files with 48 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
app/components/main/header.vue
View File

@@ -40,26 +40,32 @@ function isActive(path: string) {
About About
</NuxtLink> </NuxtLink>
</li> </li>
<li> <li class="flex items-center">
<ClientOnly> <ClientOnly>
<button <div class="relative w-5 h-5 flex items-center justify-center">
v-if="colorMode.value === 'light'" <Transition name="icon-fade" mode="out-in">
name="light-mode" <button
title="Light" v-if="colorMode.value === 'light'"
class="hover:scale-110 transition-all ease-out hover:cursor-pointer" key="light-mode"
@click="onClick('dark')" name="light-mode"
> title="Light"
<Icon name="icon-park:moon" size="20" class="-translate-y-[-20%]" /> class="absolute inset-0 flex items-center justify-center hover:scale-110 transition-all ease-out hover:cursor-pointer"
</button> @click="onClick('dark')"
<button >
v-if="colorMode.value === 'dark'" <Icon name="icon-park:moon" size="20" />
name="dark-mode" </button>
title="Dark" <button
class="hover:scale-110 transition-all ease-out hover:cursor-pointer" v-else
@click="onClick('light')" key="dark-mode"
> name="dark-mode"
<Icon name="noto:sun" size="20" class="-translate-y-[-20%]" /> title="Dark"
</button> class="absolute inset-0 flex items-center justify-center hover:scale-110 transition-all ease-out hover:cursor-pointer"
@click="onClick('light')"
>
<Icon name="noto:sun" size="20" />
</button>
</Transition>
</div>
<template #fallback> <template #fallback>
<!-- this will be rendered on server side --> <!-- this will be rendered on server side -->
<Icon name="svg-spinners:180-ring" size="20" class="-translate-y-[-20%]" /> <Icon name="svg-spinners:180-ring" size="20" class="-translate-y-[-20%]" />
@@ -70,3 +76,26 @@ function isActive(path: string) {
</div> </div>
</div> </div>
</template> </template>
<style scoped>
.icon-fade-enter-active,
.icon-fade-leave-active {
transition: all 0.3s ease-in-out;
}
.icon-fade-enter-from {
opacity: 0;
transform: rotate(-90deg) scale(0.8);
}
.icon-fade-leave-to {
opacity: 0;
transform: rotate(90deg) scale(0.8);
}
.icon-fade-enter-to,
.icon-fade-leave-from {
opacity: 1;
transform: rotate(0deg) scale(1);
}
</style>