From d2c4fd207ba773de65446cc2edab5dfbfc3fb081 Mon Sep 17 00:00:00 2001 From: xiangshu233 Date: Sun, 10 Mar 2024 21:08:06 +0800 Subject: [PATCH] refactor: :recycle: refactor dark mode using vueuse useDark --- index.html | 8 +-- src/layout/index.vue | 1 + src/main.ts | 6 -- src/router/modules.ts | 20 ++++++ src/settings/designSetting.ts | 2 +- src/styles/common.less | 25 +++----- src/views/example/index.vue | 40 ++++++++++++ src/views/my/ThemeSetting.vue | 72 +++++++++++++--------- src/views/welcome/index.vue | 112 ---------------------------------- uno.config.ts | 1 + 10 files changed, 117 insertions(+), 170 deletions(-) create mode 100644 src/views/example/index.vue delete mode 100644 src/views/welcome/index.vue diff --git a/index.html b/index.html index a2ca5d5..99a063f 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + @@ -10,12 +10,12 @@
+ + diff --git a/src/views/my/ThemeSetting.vue b/src/views/my/ThemeSetting.vue index 543cbe4..d1f5001 100644 --- a/src/views/my/ThemeSetting.vue +++ b/src/views/my/ThemeSetting.vue @@ -2,11 +2,13 @@
主题模式 - - - + + + + + 系统主题色
@@ -14,8 +16,8 @@ 页面切换动画 - - - + + + + + + + + - import { computed, reactive } from 'vue' +import { useDark, useToggle } from '@vueuse/core' import NavBar from './components/NavBar.vue' -import { updateDarkSign } from '@/theme' import { useDesignSettingStore } from '@/store/modules/designSetting' import { animates as animateOptions } from '@/settings/animateSetting' const designStore = useDesignSettingStore() +const isDark = useDark({ + valueDark: 'dark', + valueLight: 'light', +}) + +const toggleDark = useToggle(isDark) + const getDarkMode = computed({ - get: () => designStore.getDarkMode === 'dark', - set: (value) => { - const darkMode = value ? 'dark' : 'light' - updateDarkSign(darkMode) - designStore.setDarkMode(darkMode) + get: () => isDark.value, + set: () => { + toggleDark() + designStore.setDarkMode(isDark.value ? 'dark' : 'light') }, }) diff --git a/src/views/welcome/index.vue b/src/views/welcome/index.vue deleted file mode 100644 index b5fdde0..0000000 --- a/src/views/welcome/index.vue +++ /dev/null @@ -1,112 +0,0 @@ - - - - - diff --git a/uno.config.ts b/uno.config.ts index bfc365a..c7be1aa 100644 --- a/uno.config.ts +++ b/uno.config.ts @@ -78,5 +78,6 @@ export default defineConfig({ 'i-simple-icons:atlassian', 'i-simple-icons:soundcharts', 'i-simple-icons:docsify', + 'i-material-symbols:award-star', ], })