docs: add dark mode

Author: ljt990218

.vitepress/config.ts

@@ -10,7 +10,8 @@ const vue3VantMobile: DefaultTheme.NavItemWithLink[] = [
   { text: '目录结构', link: '/vue3-vant-mobile/directory'},
   { text: '图标', link: '/vue3-vant-mobile/icons' },
   { text: '浏览器适配', link: '/vue3-vant-mobile/browser-adaptation' },
-  { text: '路由', link: '/vue3-vant-mobile/routing'}
+  { text: '路由', link: '/vue3-vant-mobile/routing'},
+  { text: '暗黑模式', link: '/vue3-vant-mobile/dark-mode' },
 ]
 
 const vue3VarletMobile: DefaultTheme.NavItemWithLink[] = [

vue3-vant-mobile/dark-mode.md

@@ -0,0 +1,54 @@
+---
+title: 暗黑模式
+description: 如何只使用某种模式
+outline: deep
+---
+
+# :last_quarter_moon: 暗黑模式
+
+### 初始化模式 {#initialization-mode}
+
+根据本地存储的主题设置和系统偏好，自动为页面添加或移除 dark 类，实现暗黑模式的切换。
+
+```ts
+<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>
+```
+
+### 切换模式 {#switch-mode}
+
+统一管理暗黑模式的状态、切换和用户偏好，方便在 Vue 组件中直接使用。
+
+```text
+src/composables/
+└── composables/
+    └── dark.ts
+```
+
+```ts
+// these APIs are auto-imported from @vueuse/core
+export const isDark = useDark()
+export const toggleDark = useToggle(isDark)
+export const preferredDark = usePreferredDark()
+```
+
+
+## 常见问题 {#FAQ}
+
+### 固定模式 {#fixed-mode}
+
+固定使用某种模式，并且不受设备、浏览器影响。例如固定`light`模式，只需在`dark.ts`文件添加一行代码即可。
+
+```ts{2}
+// these APIs are auto-imported from @vueuse/core
+useDark().value = false
+export const isDark = useDark()
+export const toggleDark = useToggle(isDark)
+export const preferredDark = usePreferredDark()
+```