forked from zguiy/utils
68 lines
2.1 KiB
Vue
68 lines
2.1 KiB
Vue
<template>
|
|
<button
|
|
@click="toggleTheme"
|
|
class="relative w-10 h-10 rounded-full bg-card hover:bg-block-hover text-secondary hover:text-primary transition-all duration-300 shadow-md hover:shadow-lg border border-opacity-20 border-primary-500 hover:border-opacity-40 group"
|
|
:title="theme === 'dark' ? '切换到浅色主题' : '切换到深色主题'"
|
|
>
|
|
<!-- 图标容器 -->
|
|
<div class="absolute inset-0 flex items-center justify-center">
|
|
<!-- 太阳图标 (浅色模式) -->
|
|
<FontAwesomeIcon
|
|
:icon="['fas', 'sun']"
|
|
:class="[
|
|
'w-5 h-5 transition-all duration-300 transform',
|
|
theme === 'dark'
|
|
? 'opacity-100 scale-100 rotate-0'
|
|
: 'opacity-0 scale-50 rotate-180'
|
|
]"
|
|
/>
|
|
|
|
<!-- 月亮图标 (深色模式) -->
|
|
<FontAwesomeIcon
|
|
:icon="['fas', 'moon']"
|
|
:class="[
|
|
'w-5 h-5 transition-all duration-300 transform absolute',
|
|
theme === 'dark'
|
|
? 'opacity-0 scale-50 -rotate-180'
|
|
: 'opacity-100 scale-100 rotate-0'
|
|
]"
|
|
/>
|
|
</div>
|
|
|
|
<!-- 悬停时的光晕效果 -->
|
|
<div class="absolute inset-0 rounded-full bg-primary-500 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
|
|
</button>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useTheme } from '@/composables/useTheme'
|
|
|
|
const { theme, toggleTheme } = useTheme()
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 确保图标切换动画流畅 */
|
|
.fa-sun,
|
|
.fa-moon {
|
|
color: rgb(var(--color-text-secondary));
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
/* 悬停时图标颜色变化 */
|
|
button:hover .fa-sun,
|
|
button:hover .fa-moon {
|
|
color: rgb(var(--color-primary));
|
|
}
|
|
|
|
/* 为浅色主题的太阳图标添加特殊效果 */
|
|
[data-theme='light'] .fa-sun {
|
|
color: rgb(var(--color-warning));
|
|
filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.3));
|
|
}
|
|
|
|
/* 为深色主题的月亮图标添加特殊效果 */
|
|
[data-theme='dark'] .fa-moon {
|
|
color: rgb(var(--color-primary-light));
|
|
filter: drop-shadow(0 0 4px rgba(129, 140, 248, 0.3));
|
|
}
|
|
</style> |