From 3e8fc40c3621da1ef35645d376dab7765b35bb40 Mon Sep 17 00:00:00 2001
From: Mike Bostock <mbostock@gmail.com>
Date: Wed, 9 Oct 2024 10:41:20 -0700
Subject: [PATCH] fix(client): use `usePreferredDark` with `appearance:
 "force-auto"` (#4263)

---
 src/client/app/data.ts | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/client/app/data.ts b/src/client/app/data.ts
index 67fc0942..c99de52f 100644
--- a/src/client/app/data.ts
+++ b/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
-        ? useDark({
-            storageKey: APPEARANCE_KEY,
-            initialValue: () => (appearance === 'dark' ? 'dark' : 'auto'),
-            ...(typeof appearance === 'object' ? appearance : {})
-          })
-        : ref(false)
+      : appearance === 'force-auto'
+        ? usePreferredDark()
+        : appearance
+          ? useDark({
+              storageKey: APPEARANCE_KEY,
+              initialValue: () => (appearance === 'dark' ? 'dark' : 'auto'),
+              ...(typeof appearance === 'object' ? appearance : {})
+            })
+          : ref(false)
 
   const hashRef = ref(inBrowser ? location.hash : '')