From 67610363bcb354d33327e6b5c3c2d916ed025ffc Mon Sep 17 00:00:00 2001
From: zhoulixiang <18366276315@163.com>
Date: Fri, 17 Nov 2023 22:24:39 +0800
Subject: [PATCH] fix(ally): clear up confusion with the title of theme switch
 (#3215)

Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
---
 .../theme-default/components/VPSwitchAppearance.vue       | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/client/theme-default/components/VPSwitchAppearance.vue b/src/client/theme-default/components/VPSwitchAppearance.vue
index 003e14b9..16828e7e 100644
--- a/src/client/theme-default/components/VPSwitchAppearance.vue
+++ b/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"