fix(ally): clear up confusion with the title of theme switch (#3215)

Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>

Author: zh-lx

src/client/theme-default/components/VPSwitchAppearance.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { inject } from 'vue'
+import { inject, computed } from 'vue'
 import { useData } from '../composables/data'
 import VPSwitch from './VPSwitch.vue'
 import VPIconMoon from './icons/VPIconMoon.vue'
@@ -10,11 +10,15 @@ const { isDark } = useData()
 const toggleAppearance = inject('toggle-appearance', () => {
   isDark.value = !isDark.value
 })
+
+const switchTitle = computed(() => {
+  return isDark.value ? 'Switch to light theme' : 'Switch to dark theme'
+})
 </script>
 
 <template>
   <VPSwitch
-    title="toggle dark mode"
+    :title="switchTitle"
     class="VPSwitchAppearance"
     :aria-checked="isDark"
     @click="toggleAppearance"