| 123456789101112131415161718 |
- <template>
- <el-switch v-model="isDark" :active-action-icon="Moon" :inactive-action-icon="Sunny" inline-prompt
- @change="onToggle" />
- </template>
- <script setup lang="ts">
- import { Sunny, Moon } from '@element-plus/icons-vue'
- import { isDark, toggleTheme } from '@/composables/useTheme'
- function onToggle() {
- // 可选：添加过渡动画
- document.documentElement.classList.add('theme-transition')
- toggleTheme()
- setTimeout(() => {
- document.documentElement.classList.remove('theme-transition')
- }, 400)
- }
- </script>
|
