| 提交 | 用户 | 时间 | ||
| 820397 | 1 | <script lang="ts" setup> |
| H | 2 | import { useAppStore } from '@/store/modules/app' |
| 3 | import { useIcon } from '@/hooks/web/useIcon' | |
| 4 | import { useDesign } from '@/hooks/web/useDesign' | |
| 5 | ||
| 6 | defineOptions({ name: 'ThemeSwitch' }) | |
| 7 | ||
| 8 | const { getPrefixCls } = useDesign() | |
| 9 | ||
| 10 | const prefixCls = getPrefixCls('theme-switch') | |
| 11 | ||
| 12 | const Sun = useIcon({ icon: 'emojione-monotone:sun', color: '#fde047' }) | |
| 13 | ||
| 14 | const CrescentMoon = useIcon({ icon: 'emojione-monotone:crescent-moon', color: '#fde047' }) | |
| 15 | ||
| 16 | const appStore = useAppStore() | |
| 17 | ||
| 18 | // 初始化获取是否是暗黑主题 | |
| 19 | const isDark = ref(appStore.getIsDark) | |
| 20 | ||
| 21 | // 设置switch的背景颜色 | |
| 22 | const blackColor = 'var(--el-color-black)' | |
| 23 | ||
| 24 | const themeChange = (val: boolean) => { | |
| 25 | appStore.setIsDark(val) | |
| 26 | } | |
| 27 | </script> | |
| 28 | ||
| 29 | <template> | |
| 30 | <ElSwitch | |
| 31 | v-model="isDark" | |
| 32 | :active-color="blackColor" | |
| 33 | :active-icon="Sun" | |
| 34 | :border-color="blackColor" | |
| 35 | :class="prefixCls" | |
| 36 | :inactive-color="blackColor" | |
| 37 | :inactive-icon="CrescentMoon" | |
| 38 | inline-prompt | |
| 39 | @change="themeChange" | |
| 40 | /> | |
| 41 | </template> | |
| 42 | <style lang="scss" scoped> | |
| 43 | :deep(.el-switch__core .el-switch__inner .is-icon) { | |
| 44 | overflow: visible; | |
| 45 | } | |
| 46 | </style> | |
