From b1222f8feabd598994ab118d9146a284a7e313d7 Mon Sep 17 00:00:00 2001
From: Cesar Gomez <cgomez@colegium.com>
Date: Sat, 9 Dec 2023 00:38:37 -0500
Subject: [PATCH] fix(ally): can customize dark mode switch titles now

---
 docs/reference/default-theme-config.md             | 14 ++++++++++++++
 .../components/VPSwitchAppearance.vue              |  8 ++++++--
 types/default-theme.d.ts                           | 10 ++++++++++
 3 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/docs/reference/default-theme-config.md b/docs/reference/default-theme-config.md
index 8402dc08..fb6d30b5 100644
--- a/docs/reference/default-theme-config.md
+++ b/docs/reference/default-theme-config.md
@@ -406,6 +406,20 @@ export interface DocFooter {
 
 Can be used to customize the dark mode switch label. This label is only displayed in the mobile view.
 
+## lightModeSwitchTitle
+
+- Type: `string`
+- Default: `Switch to light theme`
+
+Can be used to customize the light mode switch title that appears on hovering.
+
+## darkModeSwitchTitle
+
+- Type: `string`
+- Default: `Switch to dark theme`
+
+Can be used to customize the dark mode switch title that appears on hovering.
+
 ## sidebarMenuLabel
 
 - Type: `string`
diff --git a/src/client/theme-default/components/VPSwitchAppearance.vue b/src/client/theme-default/components/VPSwitchAppearance.vue
index 16828e7e..d7a70ddb 100644
--- a/src/client/theme-default/components/VPSwitchAppearance.vue
+++ b/src/client/theme-default/components/VPSwitchAppearance.vue
@@ -5,14 +5,18 @@ import VPSwitch from './VPSwitch.vue'
 import VPIconMoon from './icons/VPIconMoon.vue'
 import VPIconSun from './icons/VPIconSun.vue'
 
-const { isDark } = useData()
+const { isDark, theme } = useData()
 
 const toggleAppearance = inject('toggle-appearance', () => {
   isDark.value = !isDark.value
 })
 
+const lightModeSwitchTitle = computed(() => theme.value.lightModeSwitchTitle || 'Switch to light theme')
+
+const darkModeSwitchLabel = computed(() => theme.value.darkModeSwitchTitle || 'Switch to dark theme')
+
 const switchTitle = computed(() => {
-  return isDark.value ? 'Switch to light theme' : 'Switch to dark theme'
+  return isDark.value ? lightModeSwitchTitle.value : darkModeSwitchLabel.value
 })
 </script>
 
diff --git a/types/default-theme.d.ts b/types/default-theme.d.ts
index 94dfb95c..dc066881 100644
--- a/types/default-theme.d.ts
+++ b/types/default-theme.d.ts
@@ -96,6 +96,16 @@ export namespace DefaultTheme {
      */
     darkModeSwitchLabel?: string
 
+    /**
+     * @default 'Switch to light theme'
+     */
+    lightModeSwitchTitle?: string
+
+    /**
+     * @default 'Switch to dark theme'
+     */
+    darkModeSwitchTitle?: string
+
     /**
      * @default 'Menu'
      */