use usePreferredDark with appearance: force-auto

12 months ago · f8edd7c6b5
parent 6ea60f5d0c
commit f8edd7c6b5
1 changed files with 9 additions and 7 deletions
--- 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,6 +79,8 @@ export function initData(route: Route): VitePressData {
  const isDark =
    appearance === 'force-dark'
      ? ref(true)
+      : appearance === 'force-auto'
+      ? usePreferredDark()
      : appearance
      ? useDark({
          storageKey: APPEARANCE_KEY,