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

Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
pull/2866/merge
Cesar Gomez 1 year ago committed by GitHub
parent bb64ecba3d
commit 50c9758d3f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -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`

@ -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>

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

Loading…
Cancel
Save