| 提交 | 用户 | age | ||
| 5b8eb4 | 1 | <template> |
| 55e9d9 | 2 | <div v-if="getShowDarkModeToggle" :class="getClass" @click="toggleDarkMode"> |
| 5b8eb4 | 3 | <div :class="`${prefixCls}-inner`"> </div> |
| V | 4 | <SvgIcon size="14" name="sun" /> |
| 5 | <SvgIcon size="14" name="moon" /> | |
| 6 | </div> | |
| 7 | </template> | |
| 2f6d13 | 8 | <script lang="ts" setup> |
| V | 9 | import { computed, unref } from 'vue'; |
| 5b8eb4 | 10 | import { SvgIcon } from '/@/components/Icon'; |
| 55e9d9 | 11 | import { useDesign } from '/@/hooks/web/useDesign'; |
| 5b8eb4 | 12 | import { useRootSetting } from '/@/hooks/setting/useRootSetting'; |
| V | 13 | import { updateHeaderBgColor, updateSidebarBgColor } from '/@/logics/theme/updateBackground'; |
| 14 | import { updateDarkTheme } from '/@/logics/theme/dark'; | |
| 15 | import { ThemeEnum } from '/@/enums/appEnum'; | |
| 16 | ||
| 2f6d13 | 17 | const { prefixCls } = useDesign('dark-switch'); |
| V | 18 | const { getDarkMode, setDarkMode, getShowDarkModeToggle } = useRootSetting(); |
| d67772 | 19 | |
| 2f6d13 | 20 | const isDark = computed(() => getDarkMode.value === ThemeEnum.DARK); |
| 55e9d9 | 21 | |
| 2f6d13 | 22 | const getClass = computed(() => [ |
| V | 23 | prefixCls, |
| 24 | { | |
| 25 | [`${prefixCls}--dark`]: unref(isDark), | |
| 5b8eb4 | 26 | }, |
| 2f6d13 | 27 | ]); |
| V | 28 | |
| 29 | function toggleDarkMode() { | |
| 30 | const darkMode = getDarkMode.value === ThemeEnum.DARK ? ThemeEnum.LIGHT : ThemeEnum.DARK; | |
| 31 | setDarkMode(darkMode); | |
| 32 | updateDarkTheme(darkMode); | |
| 33 | updateHeaderBgColor(); | |
| 34 | updateSidebarBgColor(); | |
| 35 | } | |
| 5b8eb4 | 36 | </script> |
| V | 37 | <style lang="less" scoped> |
| 55e9d9 | 38 | @prefix-cls: ~'@{namespace}-dark-switch'; |
| 5b8eb4 | 39 | |
| V | 40 | html[data-theme='dark'] { |
| 41 | .@{prefix-cls} { | |
| 42 | border: 1px solid rgb(196, 188, 188); | |
| 43 | } | |
| 44 | } | |
| 45 | ||
| 46 | .@{prefix-cls} { | |
| 47 | position: relative; | |
| 48 | display: flex; | |
| 49 | width: 50px; | |
| 50 | height: 26px; | |
| 51 | padding: 0 6px; | |
| 52 | margin-left: auto; | |
| 53 | cursor: pointer; | |
| 54 | background-color: #151515; | |
| 55 | border-radius: 30px; | |
| 56 | justify-content: space-between; | |
| 57 | align-items: center; | |
| 58 | ||
| 59 | &-inner { | |
| 60 | position: absolute; | |
| 61 | z-index: 1; | |
| 62 | width: 18px; | |
| 63 | height: 18px; | |
| 64 | background-color: #fff; | |
| 65 | border-radius: 50%; | |
| 66 | transition: transform 0.5s, background-color 0.5s; | |
| 67 | will-change: transform; | |
| 68 | } | |
| 69 | ||
| 70 | &--dark { | |
| 71 | .@{prefix-cls}-inner { | |
| 72 | transform: translateX(calc(100% + 2px)); | |
| 73 | } | |
| 74 | } | |
| 75 | } | |
| 76 | </style> | |
