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