use usePreferredDark with appearance: force-auto

src/client/app/data.ts

@@ -1,5 +1,5 @@
 import siteData from '@siteData'
-import { useDark } from '@vueuse/core'
+import { useDark, usePreferredDark } from '@vueuse/core'
 import {
   computed,
   inject,
@@ -79,13 +79,15 @@ export function initData(route: Route): VitePressData {
   const isDark =
     appearance === 'force-dark'
       ? ref(true)
+      : appearance === 'force-auto'
+      ? usePreferredDark()
       : appearance
-        ? useDark({
+      ? useDark({
-            storageKey: APPEARANCE_KEY,
+          storageKey: APPEARANCE_KEY,
-            initialValue: () => (appearance === 'dark' ? 'dark' : 'auto'),
+          initialValue: () => (appearance === 'dark' ? 'dark' : 'auto'),
-            ...(typeof appearance === 'object' ? appearance : {})
+          ...(typeof appearance === 'object' ? appearance : {})
-          })
+        })
-        : ref(false)
+      : ref(false)
 
   const hashRef = ref(inBrowser ? location.hash : '')