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