refactor: clean dark mode

Author: cwandev

src/App.vue

@@ -1,8 +1,5 @@
 <script setup lang="ts">
-import { storeToRefs } from 'pinia'
-import useAppStore from '@/stores/modules/app'
 import useRouteCache from '@/stores/modules/routeCache'
-import useAutoThemeSwitcher from '@/hooks/useAutoThemeSwitcher'
 
 useHead({
   title: 'Vue3 Vant Mobile',
@@ -25,32 +22,27 @@ useHead({
   ],
 })
 
-const appStore = useAppStore()
-const { mode } = storeToRefs(appStore)
-
-const { initializeThemeSwitcher } = useAutoThemeSwitcher(appStore)
-
 const keepAliveRouteNames = computed(() => {
   return useRouteCache().routeCaches as string[]
 })
 
-onMounted(() => {
-  initializeThemeSwitcher()
+const mode = computed(() => {
+  return isDark.value ? 'dark' : 'light'
 })
 </script>
 
 <template>
-  <VanConfigProvider :theme="mode">
-    <NavBar />
+  <van-config-provider :theme="mode">
+    <nav-bar />
     <router-view v-slot="{ Component, route }">
       <section class="app-wrapper">
         <keep-alive :include="keepAliveRouteNames">
           <component :is="Component" :key="route.name" />
         </keep-alive>
       </section>
     </router-view>
-    <TabBar />
-  </VanConfigProvider>
+    <tab-bar />
+  </van-config-provider>
 </template>
 
 <style scoped>

src/hooks/useAutoThemeSwitcher.ts

@@ -1,26 +1,18 @@
 <script setup lang="ts">
 import type { PickerColumn } from 'vant'
-import useAppStore from '@/stores/modules/app'
 import { languageColumns, locale } from '@/utils/i18n'
 
-const appStore = useAppStore()
-const checked = ref<boolean>(isDark.value)
-
-watch(
-  () => isDark.value,
-  (newMode) => {
-    checked.value = newMode
-  },
-  { immediate: true },
-)
-
-function toggle() {
-  toggleDark()
-  appStore.switchMode(isDark.value ? 'dark' : 'light')
-}
-
 const { t } = useI18n()
 
+const menuItems = computed(() => ([
+  { title: t('menus.mockGuide'), route: 'mock' },
+  { title: t('menus.echartsDemo'), route: 'charts' },
+  { title: t('menus.unocssExample'), route: 'unocss' },
+  { title: t('menus.persistPiniaState'), route: 'counter' },
+  { title: t('menus.keepAlive'), route: 'keepalive' },
+  { title: t('menus.404Demo'), route: 'unknown' },
+]))
+
 const showLanguagePicker = ref(false)
 const languageValues = ref<Array<string>>([locale.value])
 const language = computed(() => languageColumns.find(l => l.value === locale.value).text)
@@ -30,37 +22,44 @@ function onLanguageConfirm(event: { selectedOptions: PickerColumn }) {
   showLanguagePicker.value = false
 }
 
-const menuItems = computed(() => ([
-  { title: t('menus.mockGuide'), route: 'mock' },
-  { title: t('menus.echartsDemo'), route: 'charts' },
-  { title: t('menus.unocssExample'), route: 'unocss' },
-  { title: t('menus.persistPiniaState'), route: 'counter' },
-  { title: t('menus.keepAlive'), route: 'keepalive' },
-  { title: t('menus.404Demo'), route: 'unknown' },
-]))
+const checked = ref<boolean>(isDark.value)
+
+watchEffect(() => {
+  checked.value = isDark.value
+})
+
+function toggle(val: boolean) {
+  checked.value = val
+  toggleDark()
+}
 </script>
 
 <template>
-  <VanCellGroup :title="t('menus.basicSettings')" :border="false" :inset="true">
-    <VanCell center :title="t('menus.darkMode')">
+  <van-cell-group :title="t('menus.basicSettings')" :border="false" :inset="true">
+    <van-cell center :title="t('menus.darkMode')">
       <template #right-icon>
-        <VanSwitch v-model="checked" size="20px" aria-label="on/off Dark Mode" @click="toggle()" />
+        <van-switch
+          v-model="checked"
+          size="20px"
+          aria-label="on/off Dark Mode"
+          @change="toggle"
+        />
       </template>
-    </VanCell>
+    </van-cell>
 
-    <VanCell
+    <van-cell
       is-link
       :title="t('menus.language')"
       :value="language"
       @click="showLanguagePicker = true"
     />
-  </VanCellGroup>
+  </van-cell-group>
 
-  <VanCellGroup :title="t('menus.exampleComponents')" :border="false" :inset="true">
+  <van-cell-group :title="t('menus.exampleComponents')" :border="false" :inset="true">
     <template v-for="item in menuItems" :key="item.route">
-      <VanCell :title="item.title" :to="item.route" is-link />
+      <van-cell :title="item.title" :to="item.route" is-link />
     </template>
-  </VanCellGroup>
+  </van-cell-group>
 
   <van-popup v-model:show="showLanguagePicker" position="bottom">
     <van-picker

src/pages/index.vue

@@ -1,11 +1,10 @@
 import { createPinia } from 'pinia'
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 
-import useAppStore from './modules/app'
 import useUserStore from './modules/user'
 
 const pinia = createPinia()
 pinia.use(piniaPluginPersistedstate)
 
-export { useAppStore, useUserStore }
+export { useUserStore }
 export default pinia