| 提交 | 用户 | 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> | |
| 8 | <script lang="ts"> | |
| 9 | import { defineComponent, computed } from 'vue'; | |
| 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 | ||
| 17 | export default defineComponent({ | |
| 18 | name: 'DarkModeToggle', | |
| 19 | components: { SvgIcon }, | |
| 20 | setup() { | |
| 55e9d9 | 21 | const { prefixCls } = useDesign('dark-switch'); |
| 5b8eb4 | 22 | const { getDarkMode, setDarkMode, getShowDarkModeToggle } = useRootSetting(); |
| d67772 | 23 | |
| 5b8eb4 | 24 | const isDark = computed(() => getDarkMode.value === ThemeEnum.DARK); |
| 55e9d9 | 25 | |
| V | 26 | const getClass = computed(() => [ |
| 27 | prefixCls, | |
| 28 | { | |
| 29 | [`${prefixCls}--dark`]: isDark, | |
| 30 | }, | |
| 31 | ]); | |
| d67772 | 32 | |
| 5b8eb4 | 33 | function toggleDarkMode() { |
| V | 34 | const darkMode = getDarkMode.value === ThemeEnum.DARK ? ThemeEnum.LIGHT : ThemeEnum.DARK; |
| 35 | setDarkMode(darkMode); | |
| 36 | updateDarkTheme(darkMode); | |
| 37 | updateHeaderBgColor(); | |
| 38 | updateSidebarBgColor(); | |
| 39 | } | |
| 40 | ||
| 41 | return { | |
| 55e9d9 | 42 | getClass, |
| 5b8eb4 | 43 | isDark, |
| V | 44 | prefixCls, |
| 45 | toggleDarkMode, | |
| 46 | getShowDarkModeToggle, | |
| 47 | }; | |
| 48 | }, | |
| 49 | }); | |
| 50 | </script> | |
| 51 | <style lang="less" scoped> | |
| 55e9d9 | 52 | @prefix-cls: ~'@{namespace}-dark-switch'; |
| 5b8eb4 | 53 | |
| V | 54 | html[data-theme='dark'] { |
| 55 | .@{prefix-cls} { | |
| 56 | border: 1px solid rgb(196, 188, 188); | |
| 57 | } | |
| 58 | } | |
| 59 | ||
| 60 | .@{prefix-cls} { | |
| 61 | position: relative; | |
| 62 | display: flex; | |
| 63 | width: 50px; | |
| 64 | height: 26px; | |
| 65 | padding: 0 6px; | |
| 66 | margin-left: auto; | |
| 67 | cursor: pointer; | |
| 68 | background-color: #151515; | |
| 69 | border-radius: 30px; | |
| 70 | justify-content: space-between; | |
| 71 | align-items: center; | |
| 72 | ||
| 73 | &-inner { | |
| 74 | position: absolute; | |
| 75 | z-index: 1; | |
| 76 | width: 18px; | |
| 77 | height: 18px; | |
| 78 | background-color: #fff; | |
| 79 | border-radius: 50%; | |
| 80 | transition: transform 0.5s, background-color 0.5s; | |
| 81 | will-change: transform; | |
| 82 | } | |
| 83 | ||
| 84 | &--dark { | |
| 85 | .@{prefix-cls}-inner { | |
| 86 | transform: translateX(calc(100% + 2px)); | |
| 87 | } | |
| 88 | } | |
| 89 | } | |
| 90 | </style> | |
