25 lines
591 B
Vue
25 lines
591 B
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<n-button quaternary @click="changeTheme">
|
||
|
|
<n-icon size="20" :depth="1">
|
||
|
|
<MoonIcon v-if="designStore.darkTheme" />
|
||
|
|
<SunnyIcon v-else />
|
||
|
|
</n-icon>
|
||
|
|
</n-button>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { useDesignStore } from '@/store/modules/designStore/designStore'
|
||
|
|
import { setHtmlTheme } from '@/utils/style'
|
||
|
|
import { Moon as MoonIcon, Sunny as SunnyIcon } from '@vicons/ionicons5'
|
||
|
|
|
||
|
|
const designStore = useDesignStore()
|
||
|
|
|
||
|
|
// 改变样式
|
||
|
|
const changeTheme = () => {
|
||
|
|
designStore.changeTheme()
|
||
|
|
setHtmlTheme()
|
||
|
|
}
|
||
|
|
</script>
|