From d327811fd5b333a73d77730b6b0b347e3d052ebc Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Sat, 22 Oct 2022 11:10:58 +0530
Subject: [PATCH] feat: expose isDark (#1525)

---
 docs/guide/api.md                                  |  1 +
 src/client/app/data.ts                             | 14 ++++++++++++--
 .../components/VPSwitchAppearance.vue              |  8 ++++++--
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/docs/guide/api.md b/docs/guide/api.md
index 28eeb0c04fe4..44fbba27f86a 100644
--- a/docs/guide/api.md
+++ b/docs/guide/api.md
@@ -20,6 +20,7 @@ interface VitePressData {
   title: Ref<string>
   description: Ref<string>
   localePath: Ref<string>
+  isDark: Ref<boolean>
 }
 ```
 
diff --git a/src/client/app/data.ts b/src/client/app/data.ts
index 22dc314194ef..0c6ccbb3c452 100644
--- a/src/client/app/data.ts
+++ b/src/client/app/data.ts
@@ -1,4 +1,12 @@
-import { InjectionKey, Ref, shallowRef, readonly, computed, inject } from 'vue'
+import {
+  InjectionKey,
+  Ref,
+  computed,
+  inject,
+  readonly,
+  ref,
+  shallowRef
+} from 'vue'
 import { Route } from './router.js'
 import siteData from '@siteData'
 import {
@@ -20,6 +28,7 @@ export interface VitePressData<T = any> {
   description: Ref<string>
   lang: Ref<string>
   localePath: Ref<string>
+  isDark: Ref<boolean>
 }
 
 // site data is a singleton
@@ -60,7 +69,8 @@ export function initData(route: Route): VitePressData {
     }),
     description: computed(() => {
       return route.data.description || site.value.description
-    })
+    }),
+    isDark: ref(false)
   }
 }
 
diff --git a/src/client/theme-default/components/VPSwitchAppearance.vue b/src/client/theme-default/components/VPSwitchAppearance.vue
index 2c51dadccadf..e23329a84c65 100644
--- a/src/client/theme-default/components/VPSwitchAppearance.vue
+++ b/src/client/theme-default/components/VPSwitchAppearance.vue
@@ -1,12 +1,12 @@
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, watch } from 'vue'
 import { useData } from 'vitepress'
 import { APPEARANCE_KEY } from '../../shared.js'
 import VPSwitch from './VPSwitch.vue'
 import VPIconSun from './icons/VPIconSun.vue'
 import VPIconMoon from './icons/VPIconMoon.vue'
 
-const { site } = useData()
+const { site, isDark } = useData()
 const checked = ref(false)
 const toggle = typeof localStorage !== 'undefined' ? useAppearance() : () => {}
 
@@ -68,6 +68,10 @@ function useAppearance() {
 
   return toggle
 }
+
+watch(checked, (newIsDark) => {
+  isDark.value = newIsDark
+})
 </script>
 
 <template>