feat: expose isDark (#1525)

docs/guide/api.md

@@ -20,6 +20,7 @@ interface VitePressData {
   title: Ref<string>
   description: Ref<string>
   localePath: Ref<string>
+  isDark: Ref<boolean>
 }
 ```
 

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)
   }
 }
 

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>