feat: support dark mode

Author: cwandev

app.vue

@@ -2,11 +2,13 @@
 import type { ConfigProviderTheme } from 'vant'
 import { appName } from '~/constants'
 
-const mode = ref<ConfigProviderTheme>('light')
-
 useHead({
   title: appName,
 })
+
+const color = useColorMode()
+const mode = computed(() => color.value as ConfigProviderTheme)
+
 </script>
 
 <template>

package.json

@@ -18,10 +18,10 @@
     "vue-router": "^4.3.0"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^2.9.0",
-    "@unocss/eslint-plugin": "^0.58.6",
-    "@unocss/nuxt": "^0.58.6",
-    "@unocss/preset-rem-to-px": "^0.58.6",
+    "@antfu/eslint-config": "^2.11.5",
+    "@unocss/eslint-plugin": "^0.58.8",
+    "@unocss/nuxt": "^0.58.8",
+    "@unocss/preset-rem-to-px": "^0.58.8",
     "@vant/nuxt": "^1.0.4",
     "eslint": "npm:eslint-ts-patch@^8.57.0-0",
     "eslint-plugin-format": "^0.1.0",

pages/index.vue

@@ -17,40 +17,49 @@ useHead({
   }],
 })
 
-const checked = ref<boolean>(false)
+const checked = computed({
+  get: () => color.value === 'dark',
+  set: (val) => {
+    return val
+  },
+})
 
 function toggleDark() {
-  checked.value = color.value === 'dark'
   color.preference = color.value === 'dark' ? 'light' : 'dark'
 }
 </script>
 
 <template>
-  <VanCellGroup inset>
-    <VanCell
-      center
-      title="🌗 暗黑模式"
-    >
-      <template #right-icon>
-        <VanSwitch
-          v-model="checked"
-          size="20px"
-          aria-label="on/off Dark Mode"
-          @click="toggleDark"
+  <ColorScheme
+    placeholder="正在加载"
+    tag="span"
+  >
+    <VanCellGroup inset>
+      <VanCell
+        center
+        title="🌗 暗黑模式"
+      >
+        <template #right-icon>
+          <VanSwitch
+            v-model="checked"
+            size="20px"
+            aria-label="on/off Dark Mode"
+            @click="toggleDark"
+          />
+        </template>
+      </VanCell>
+
+      <template
+        v-for="item in menuItems"
+        :key="item.route"
+      >
+        <!-- item.route -->
+        <VanCell
+          :title="item.title"
+          to="/"
+          is-link
         />
       </template>
-    </VanCell>
-
-    <template
-      v-for="item in menuItems"
-      :key="item.route"
-    >
-      <!-- item.route -->
-      <VanCell
-        :title="item.title"
-        to="/"
-        is-link
-      />
-    </template>
-  </VanCellGroup>
+    </VanCellGroup>
+  </ColorScheme>
 </template>