fix(theme/i18n): support customizing dark mode switch titles (#3311)

Co-authored-by: Divyansh Singh <[email protected]>

Author: mrcego

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`

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

@@ -5,14 +5,16 @@ 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 switchTitle = computed(() => {
-  return isDark.value ? 'Switch to light theme' : 'Switch to dark theme'
+  return isDark.value
+    ? theme.value.lightModeSwitchTitle || 'Switch to light theme'
+    : theme.value.darkModeSwitchTitle || 'Switch to dark theme'
 })
 </script>
 

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'
      */