vue-zone
diff --git a/‎index.html‎
Lines changed: 10 additions & 3 deletions b/‎index.html‎
Lines changed: 10 additions & 3 deletions
diff --git a/‎package.json‎
Lines changed: 2 additions & 0 deletions b/‎package.json‎
Lines changed: 2 additions & 0 deletions
diff --git a/‎pnpm-lock.yaml‎
Lines changed: 79 additions & 4 deletions b/‎pnpm-lock.yaml‎
Lines changed: 79 additions & 4 deletions
diff --git a/‎src/App.vue‎
Lines changed: 18 additions & 4 deletions b/‎src/App.vue‎
Lines changed: 18 additions & 4 deletions
@@ -2,11 +2,18 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="theme-color" content="#ffffff" />
-    <meta name="description" content="Vue + Vite H5 Starter Template" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover, user-scalable=no"/>
     <link rel="icon" href="/favicon.ico" />
-    <title>Vue3 Vant Mobile</title>
+    <script>
+      ;(function () {
+        const prefersDark =
+          window.matchMedia &&
+          window.matchMedia('(prefers-color-scheme: dark)').matches
+        const setting = localStorage.getItem('vueuse-color-scheme') || 'auto'
+        if (setting === 'dark' || (prefersDark && setting !== 'light'))
+          document.documentElement.classList.toggle('dark', true)
+      })()
+    </script>
   </head>
   <body>
     <div id="app"></div>
 
@@ -17,8 +17,10 @@
     "prepare": "npx husky install"
   },
   "dependencies": {
+    "@unhead/vue": "^1.8.10",
     "@vant/touch-emulator": "^1.4.0",
     "@vant/use": "^1.6.0",
+    "@vueuse/core": "^10.7.2",
     "axios": "^1.6.5",
     "echarts": "^5.4.3",
     "lodash-es": "^4.17.21",
 
@@ -1,17 +1,31 @@
 <script setup lang="ts">
-import type { ConfigProviderTheme } from 'vant'
 import { storeToRefs } from 'pinia'
+import useAppStore from '@/stores/modules/app'
 import useRouteTransitionNameStore from '@/stores/modules/routeTransitionName'
 
-const theme = ref<ConfigProviderTheme>('light')
-provide('isRealDark', computed(() => theme.value === 'dark'))
+useHead({
+  title: 'Vue3 Vant Mobile',
+  meta: [
+    {
+      name: 'description',
+      content: 'Vue + Vite H5 Starter Template',
+    },
+    {
+      name: 'theme-color',
+      content: () => isDark.value ? '#00aba9' : '#ffffff',
+    },
+  ],
+})
+
+const appStore = useAppStore()
+const { mode } = storeToRefs(appStore)
 
 const routeTransitionNameStore = useRouteTransitionNameStore()
 const { routeTransitionName } = storeToRefs(routeTransitionNameStore)
 </script>
 
 <template>
-  <VanConfigProvider :theme="theme">
+  <VanConfigProvider :theme="mode">
     <router-view v-slot="{ Component, route }">
       <transition :name="routeTransitionName">
         <div :key="route.name" class="app-wrapper">