diff --git a/src/client/app/data.ts b/src/client/app/data.ts
index 22dc314194ef..3d9508090c68 100644
--- a/src/client/app/data.ts
+++ b/src/client/app/data.ts
@@ -5,9 +5,9 @@ import {
   PageData,
   SiteData,
   resolveSiteDataByRoute,
-  createTitle
+  createTitle,
+  DefaultTheme
 } from '../shared.js'
-import { withBase } from './utils.js'
 
 export const dataSymbol: InjectionKey<VitePressData> = Symbol()
 
@@ -19,7 +19,7 @@ export interface VitePressData<T = any> {
   title: Ref<string>
   description: Ref<string>
   lang: Ref<string>
-  localePath: Ref<string>
+  localeIndex: Ref<string>
 }
 
 // site data is a singleton
@@ -39,7 +39,7 @@ if (import.meta.hot) {
 // per-app data
 export function initData(route: Route): VitePressData {
   const site = computed(() =>
-    resolveSiteDataByRoute(siteDataRef.value, route.path)
+    resolveSiteDataByRoute(siteDataRef.value, route.data.relativePath)
   )
 
   return {
@@ -48,13 +48,7 @@ export function initData(route: Route): VitePressData {
     page: computed(() => route.data),
     frontmatter: computed(() => route.data.frontmatter),
     lang: computed(() => site.value.lang),
-    localePath: computed(() => {
-      const { langs, lang } = site.value
-      const path = Object.keys(langs).find(
-        (langPath) => langs[langPath].lang === lang
-      )
-      return withBase(path || '/')
-    }),
+    localeIndex: computed(() => site.value.localeIndex || 'root'),
     title: computed(() => {
       return createTitle(site.value, route.data)
     }),
@@ -64,7 +58,7 @@ export function initData(route: Route): VitePressData {
   }
 }
 
-export function useData<T = any>(): VitePressData<T> {
+export function useData<T = DefaultTheme.Config>(): VitePressData<T> {
   const data = inject(dataSymbol)
   if (!data) {
     throw new Error('vitepress data not properly injected in app')
diff --git a/src/client/app/utils.ts b/src/client/app/utils.ts
index 2bc3f28b14f9..2f8be606544a 100644
--- a/src/client/app/utils.ts
+++ b/src/client/app/utils.ts
@@ -1,7 +1,7 @@
 import { siteDataRef } from './data.js'
 import { inBrowser, EXTERNAL_URL_RE } from '../shared.js'
 
-export { inBrowser }
+export { inBrowser } from '../shared.js'
 
 /**
  * Join two paths by resolving the slash collision.
diff --git a/src/client/index.ts b/src/client/index.ts
index 4d56c9ea3b94..1ed560d902a1 100644
--- a/src/client/index.ts
+++ b/src/client/index.ts
@@ -11,8 +11,7 @@ export type {
   PageData,
   SiteData,
   HeadConfig,
-  Header,
-  LocaleConfig
+  Header
 } from '../../types/shared.js'
 
 // composables
diff --git a/src/client/theme-default/components/VPAlgoliaSearchBox.vue b/src/client/theme-default/components/VPAlgoliaSearchBox.vue
index dce2916aee2e..08822b931156 100644
--- a/src/client/theme-default/components/VPAlgoliaSearchBox.vue
+++ b/src/client/theme-default/components/VPAlgoliaSearchBox.vue
@@ -4,12 +4,16 @@ import { default as docsearch } from '@docsearch/js'
 import { onMounted } from 'vue'
 import { useRouter, useRoute, useData } from 'vitepress'
 
+const props = defineProps<{
+  algolia: DefaultTheme.AlgoliaSearchOptions
+}>()
+
 const router = useRouter()
 const route = useRoute()
-const { theme, site } = useData()
+const { site } = useData()
 
 onMounted(() => {
-  initialize(theme.value.algolia)
+  initialize(props.algolia)
   setTimeout(poll, 16)
 })
 
diff --git a/src/client/theme-default/components/VPCarbonAds.vue b/src/client/theme-default/components/VPCarbonAds.vue
index d1f669f18fd2..4da1508d43db 100644
--- a/src/client/theme-default/components/VPCarbonAds.vue
+++ b/src/client/theme-default/components/VPCarbonAds.vue
@@ -1,10 +1,13 @@
 <script setup lang="ts">
+import type { DefaultTheme } from 'vitepress/theme'
 import { ref, watch, onMounted } from 'vue'
-import { useData } from 'vitepress'
 import { useAside } from '../composables/aside.js'
 
-const { theme } = useData()
-const carbonOptions = theme.value.carbonAds
+const props = defineProps<{
+  carbonAds: DefaultTheme.CarbonAdsOptions
+}>()
+
+const carbonOptions = props.carbonAds
 const { isAsideEnabled } = useAside()
 const container = ref()
 
diff --git a/src/client/theme-default/components/VPDocAside.vue b/src/client/theme-default/components/VPDocAside.vue
index f434ce55fd7b..10bbbb429533 100644
--- a/src/client/theme-default/components/VPDocAside.vue
+++ b/src/client/theme-default/components/VPDocAside.vue
@@ -1,9 +1,13 @@
 <script setup lang="ts">
+import { defineAsyncComponent } from 'vue'
 import { useData } from 'vitepress'
 import VPDocAsideOutline from './VPDocAsideOutline.vue'
-import VPDocAsideCarbonAds from './VPDocAsideCarbonAds.vue'
 
 const { theme } = useData()
+
+const VPCarbonAds = __CARBON__
+  ? defineAsyncComponent(() => import('./VPCarbonAds.vue'))
+  : () => null
 </script>
 
 <template>
@@ -17,7 +21,7 @@ const { theme } = useData()
     <div class="spacer" />
 
     <slot name="aside-ads-before" />
-    <VPDocAsideCarbonAds v-if="theme.carbonAds" />
+    <VPCarbonAds v-if="theme.carbonAds" :carbonAds="theme.carbonAds" />
     <slot name="aside-ads-after" />
 
     <slot name="aside-bottom" />
diff --git a/src/client/theme-default/components/VPDocAsideCarbonAds.vue b/src/client/theme-default/components/VPDocAsideCarbonAds.vue
deleted file mode 100644
index c5e9f1ddbcd8..000000000000
--- a/src/client/theme-default/components/VPDocAsideCarbonAds.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<script setup lang="ts">
-import { defineAsyncComponent } from 'vue'
-
-const VPCarbonAds = __CARBON__
-  ? defineAsyncComponent(() => import('./VPCarbonAds.vue'))
-  : () => null
-</script>
-
-<template>
-  <div class="VPDocAsideCarbonAds">
-    <VPCarbonAds />
-  </div>
-</template>
diff --git a/src/client/theme-default/components/VPDocAsideOutline.vue b/src/client/theme-default/components/VPDocAsideOutline.vue
index c8160cca43d7..cd8e8f91416a 100644
--- a/src/client/theme-default/components/VPDocAsideOutline.vue
+++ b/src/client/theme-default/components/VPDocAsideOutline.vue
@@ -43,7 +43,7 @@ function handleClick({ target: el }: Event) {
       <div class="outline-marker" ref="marker" />
 
       <div class="outline-title">
-        {{ theme.outlineTitle || 'On this page' }}
+        {{ theme.translations?.outlineTitle || 'On this page' }}
       </div>
 
       <nav aria-labelledby="doc-outline-aria-label">
diff --git a/src/client/theme-default/components/VPDocFooter.vue b/src/client/theme-default/components/VPDocFooter.vue
index 31adc7842b59..5441a3e757ab 100644
--- a/src/client/theme-default/components/VPDocFooter.vue
+++ b/src/client/theme-default/components/VPDocFooter.vue
@@ -42,13 +42,13 @@ const showFooter = computed(() => {
     <div v-if="control.prev || control.next" class="prev-next">
       <div class="pager">
         <a v-if="control.prev" class="pager-link prev" :href="normalizeLink(control.prev.link)">
-          <span class="desc">{{ theme.docFooter?.prev ?? 'Previous page' }}</span>
+          <span class="desc">{{ theme.translations?.docFooter?.prev || 'Previous page' }}</span>
           <span class="title">{{ control.prev.text }} </span>
         </a>
       </div>
       <div class="pager" :class="{ 'has-prev': control.prev }">
         <a v-if="control.next" class="pager-link next" :href="normalizeLink(control.next.link)">
-          <span class="desc">{{ theme.docFooter?.next ?? 'Next page' }}</span>
+          <span class="desc">{{ theme.translations?.docFooter?.next || 'Next page' }}</span>
           <span class="title">{{ control.next.text }}</span>
         </a>
       </div>
diff --git a/src/client/theme-default/components/VPDocFooterLastUpdated.vue b/src/client/theme-default/components/VPDocFooterLastUpdated.vue
index 6843785ca119..1ac29682bb9f 100644
--- a/src/client/theme-default/components/VPDocFooterLastUpdated.vue
+++ b/src/client/theme-default/components/VPDocFooterLastUpdated.vue
@@ -20,7 +20,7 @@ onMounted(() => {
 
 <template>
   <p class="VPLastUpdated">
-    {{ theme.lastUpdatedText ?? 'Last updated' }}:
+    {{ theme.translations?.lastUpdatedText || 'Last updated' }}:
     <time :datatime="isoDatetime">{{ datetime }}</time>
   </p>
 </template>
diff --git a/src/client/theme-default/components/VPLocalNav.vue b/src/client/theme-default/components/VPLocalNav.vue
index 29d323f33801..4833a5ee2840 100644
--- a/src/client/theme-default/components/VPLocalNav.vue
+++ b/src/client/theme-default/components/VPLocalNav.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { useData } from 'vitepress'
 import { useSidebar } from '../composables/sidebar.js'
 import VPIconAlignLeft from './icons/VPIconAlignLeft.vue'
 
@@ -10,6 +11,7 @@ defineEmits<{
   (e: 'open-menu'): void
 }>()
 
+const { theme } = useData()
 const { hasSidebar } = useSidebar()
 
 function scrollToTop() {
@@ -26,11 +28,13 @@ function scrollToTop() {
       @click="$emit('open-menu')"
     >
       <VPIconAlignLeft class="menu-icon" />
-      <span class="menu-text">Menu</span>
+      <span class="menu-text">
+        {{ theme.translations?.sidebarMenuLabel || 'Menu' }}
+      </span>
     </button>
 
     <a class="top-link" href="#" @click="scrollToTop">
-      Return to top
+      {{ theme.translations?.returnToTopLabel || 'Return to top' }}
     </a>
   </div>
 </template>
diff --git a/src/client/theme-default/components/VPNavBarExtra.vue b/src/client/theme-default/components/VPNavBarExtra.vue
index aceca5ce6b9b..93efc2179757 100644
--- a/src/client/theme-default/components/VPNavBarExtra.vue
+++ b/src/client/theme-default/components/VPNavBarExtra.vue
@@ -4,23 +4,27 @@ import VPFlyout from './VPFlyout.vue'
 import VPMenuLink from './VPMenuLink.vue'
 import VPSwitchAppearance from './VPSwitchAppearance.vue'
 import VPSocialLinks from './VPSocialLinks.vue'
+import { useLangs } from '../composables/langs.js'
 
 const { site, theme } = useData()
+const { localeLinks, currentLang } = useLangs()
 </script>
 
 <template>
   <VPFlyout class="VPNavBarExtra" label="extra navigation">
-    <div v-if="theme.localeLinks" class="group">
-      <p class="trans-title">{{ theme.localeLinks.text }}</p>
+    <div v-if="localeLinks.length && currentLang.label" class="group">
+      <p class="trans-title">{{ currentLang.label }}</p>
 
-      <template v-for="locale in theme.localeLinks.items" :key="locale.link">
+      <template v-for="locale in localeLinks" :key="locale.link">
         <VPMenuLink :item="locale" />
       </template>
     </div>
 
     <div v-if="site.appearance" class="group">
       <div class="item appearance">
-        <p class="label">Appearance</p>
+        <p class="label">
+          {{ theme.translations?.darkModeSwitchLabel || 'Appearance' }}
+        </p>
         <div class="appearance-action">
           <VPSwitchAppearance />
         </div>
diff --git a/src/client/theme-default/components/VPNavBarSearch.vue b/src/client/theme-default/components/VPNavBarSearch.vue
index e29075492b70..5ab51a87ebe8 100644
--- a/src/client/theme-default/components/VPNavBarSearch.vue
+++ b/src/client/theme-default/components/VPNavBarSearch.vue
@@ -52,7 +52,7 @@ function load() {
 
 <template>
   <div v-if="theme.algolia" class="VPNavBarSearch">
-    <VPAlgoliaSearchBox v-if="loaded" />
+    <VPAlgoliaSearchBox v-if="loaded" :algolia="theme.algolia" />
 
     <div v-else id="docsearch" @click="load">
       <button
diff --git a/src/client/theme-default/components/VPNavBarTitle.vue b/src/client/theme-default/components/VPNavBarTitle.vue
index 4e8ea1f6b621..89c2d9468552 100644
--- a/src/client/theme-default/components/VPNavBarTitle.vue
+++ b/src/client/theme-default/components/VPNavBarTitle.vue
@@ -1,17 +1,20 @@
 <script setup lang="ts">
 import { useData } from 'vitepress'
 import { useSidebar } from '../composables/sidebar.js'
+import { useLangs } from '../composables/langs.js'
+import { normalizeLink } from '../support/utils.js'
 import VPImage from './VPImage.vue'
 
 const { site, theme } = useData()
 const { hasSidebar } = useSidebar()
+const { currentLang } = useLangs()
 </script>
 
 <template>
   <div class="VPNavBarTitle" :class="{ 'has-sidebar': hasSidebar }">
-    <a class="title" :href="site.base">
+    <a class="title" :href="normalizeLink(currentLang.link)">
       <slot name="nav-bar-title-before" />
-      <VPImage class="logo" :image="theme.logo" />
+      <VPImage v-if="theme.logo" class="logo" :image="theme.logo" />
       <template v-if="theme.siteTitle">{{ theme.siteTitle }}</template>
       <template v-else-if="theme.siteTitle === undefined">{{ site.title }}</template>
       <slot name="nav-bar-title-after" />
diff --git a/src/client/theme-default/components/VPNavBarTranslations.vue b/src/client/theme-default/components/VPNavBarTranslations.vue
index fe91597b0a6e..d271a8cc6ed6 100644
--- a/src/client/theme-default/components/VPNavBarTranslations.vue
+++ b/src/client/theme-default/components/VPNavBarTranslations.vue
@@ -1,22 +1,22 @@
 <script lang="ts" setup>
-import { useData } from 'vitepress'
 import VPIconLanguages from './icons/VPIconLanguages.vue'
 import VPFlyout from './VPFlyout.vue'
 import VPMenuLink from './VPMenuLink.vue'
+import { useLangs } from '../composables/langs.js'
 
-const { theme } = useData()
+const { localeLinks, currentLang } = useLangs()
 </script>
 
 <template>
   <VPFlyout
-    v-if="theme.localeLinks"
+    v-if="localeLinks.length && currentLang.label"
     class="VPNavBarTranslations"
     :icon="VPIconLanguages"
   >
     <div class="items">
-      <p class="title">{{ theme.localeLinks.text }}</p>
+      <p class="title">{{ currentLang.label }}</p>
 
-      <template v-for="locale in theme.localeLinks.items" :key="locale.link">
+      <template v-for="locale in localeLinks" :key="locale.link">
         <VPMenuLink :item="locale" />
       </template>
     </div>
diff --git a/src/client/theme-default/components/VPNavScreenAppearance.vue b/src/client/theme-default/components/VPNavScreenAppearance.vue
index 3a804195cabd..87bbcb4d05de 100644
--- a/src/client/theme-default/components/VPNavScreenAppearance.vue
+++ b/src/client/theme-default/components/VPNavScreenAppearance.vue
@@ -2,12 +2,14 @@
 import { useData } from 'vitepress'
 import VPSwitchAppearance from './VPSwitchAppearance.vue'
 
-const { site } = useData()
+const { site, theme } = useData()
 </script>
 
 <template>
   <div v-if="site.appearance" class="VPNavScreenAppearance">
-    <p class="text">Appearance</p>
+    <p class="text">
+      {{ theme.translations?.darkModeSwitchLabel || 'Appearance' }}
+    </p>
     <VPSwitchAppearance />
   </div>
 </template>
diff --git a/src/client/theme-default/components/VPNavScreenTranslations.vue b/src/client/theme-default/components/VPNavScreenTranslations.vue
index 7305554ed0ce..68b0388aef3e 100644
--- a/src/client/theme-default/components/VPNavScreenTranslations.vue
+++ b/src/client/theme-default/components/VPNavScreenTranslations.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { useData } from 'vitepress'
 import VPIconChevronDown from './icons/VPIconChevronDown.vue'
 import VPIconLanguages from './icons/VPIconLanguages.vue'
+import { useLangs } from '../composables/langs.js'
 
-const { theme } = useData()
-
+const { localeLinks, currentLang } = useLangs()
 const isOpen = ref(false)
 
 function toggle() {
@@ -14,15 +13,19 @@ function toggle() {
 </script>
 
 <template>
-  <div v-if="theme.localeLinks" class="VPNavScreenTranslations" :class="{ open: isOpen }">
+  <div
+    v-if="localeLinks.length && currentLang.label"
+    class="VPNavScreenTranslations"
+    :class="{ open: isOpen }"
+  >
     <button class="title" @click="toggle">
       <VPIconLanguages class="icon lang" />
-      {{ theme.localeLinks.text }}
+      {{ currentLang.label }}
       <VPIconChevronDown class="icon chevron" />
     </button>
 
     <ul class="list">
-      <li v-for="locale in theme.localeLinks.items" :key="locale.link" class="item">
+      <li v-for="locale in localeLinks" :key="locale.link" class="item">
         <a class="link" :href="locale.link">{{ locale.text }}</a>
       </li>
     </ul>
diff --git a/src/client/theme-default/composables/edit-link.ts b/src/client/theme-default/composables/edit-link.ts
index e8a6a156e252..0e76b8931b04 100644
--- a/src/client/theme-default/composables/edit-link.ts
+++ b/src/client/theme-default/composables/edit-link.ts
@@ -5,7 +5,7 @@ export function useEditLink() {
   const { theme, page } = useData()
 
   return computed(() => {
-    const { text = 'Edit this page', pattern } = theme.value.editLink || {}
+    const { text = 'Edit this page', pattern = '' } = theme.value.editLink || {}
     const { relativePath } = page.value
     const url = pattern.replace(/:path/g, relativePath)
 
diff --git a/src/client/theme-default/composables/langs.ts b/src/client/theme-default/composables/langs.ts
new file mode 100644
index 000000000000..b79c17e72cbf
--- /dev/null
+++ b/src/client/theme-default/composables/langs.ts
@@ -0,0 +1,32 @@
+import { computed } from 'vue'
+import { useData } from 'vitepress'
+import { isExternal } from '../support/utils.js'
+
+export function useLangs() {
+  const { site, localeIndex } = useData()
+  const currentLang = computed(() => ({
+    label: site.value.locales[localeIndex.value]?.label,
+    link:
+      localeIndex.value === 'root'
+        ? '/'
+        : site.value.locales[localeIndex.value].link || `/${localeIndex.value}/`
+  }))
+
+  const localeLinks = computed(() =>
+    Object.entries(site.value.locales).flatMap(([key, value]) =>
+      currentLang.value.label === value.label
+        ? []
+        : {
+            text: value.label,
+            link:
+              key === 'root'
+                ? '/'
+                : isExternal(key)
+                ? key
+                : value.link || `/${key}/`
+          }
+    )
+  )
+
+  return { localeLinks, currentLang }
+}
diff --git a/src/client/theme-default/composables/nav.ts b/src/client/theme-default/composables/nav.ts
index e3cf686b4552..92413b5a9f74 100644
--- a/src/client/theme-default/composables/nav.ts
+++ b/src/client/theme-default/composables/nav.ts
@@ -1,6 +1,5 @@
-import type { DefaultTheme } from 'vitepress/theme'
-import { ref, computed, watch } from 'vue'
-import { useData, useRoute } from 'vitepress'
+import { ref, watch } from 'vue'
+import { useRoute } from 'vitepress'
 
 export function useNav() {
   const isScreenOpen = ref(false)
@@ -36,34 +35,3 @@ export function useNav() {
     toggleScreen
   }
 }
-
-export function useLanguageLinks() {
-  const { site, localePath, theme } = useData()
-
-  return computed(() => {
-    const langs = site.value.langs
-    const localePaths = Object.keys(langs)
-
-    // one language
-    if (localePaths.length < 2) {
-      return null
-    }
-
-    const route = useRoute()
-
-    // intentionally remove the leading slash because each locale has one
-    const currentPath = route.path.replace(localePath.value, '')
-
-    const candidates = localePaths.map((localePath) => ({
-      text: langs[localePath].label,
-      link: `${localePath}${currentPath}`
-    }))
-
-    const selectText = theme.value.selectText || 'Languages'
-
-    return {
-      text: selectText,
-      items: candidates
-    } as DefaultTheme.NavItemWithChildren
-  })
-}
diff --git a/src/client/theme-default/support/sidebar.ts b/src/client/theme-default/support/sidebar.ts
index b55fa1356f23..b00eaa021606 100644
--- a/src/client/theme-default/support/sidebar.ts
+++ b/src/client/theme-default/support/sidebar.ts
@@ -8,7 +8,7 @@ import { ensureStartingSlash } from './utils.js'
  * return empty array.
  */
 export function getSidebar(
-  sidebar: DefaultTheme.Sidebar,
+  sidebar: DefaultTheme.Sidebar | undefined,
   path: string
 ): DefaultTheme.SidebarGroup[] {
   if (Array.isArray(sidebar)) {
diff --git a/src/client/theme-default/support/utils.ts b/src/client/theme-default/support/utils.ts
index 33bc0bb539ca..3056cb973aa3 100644
--- a/src/client/theme-default/support/utils.ts
+++ b/src/client/theme-default/support/utils.ts
@@ -1,16 +1,7 @@
-import { ref } from 'vue'
 import { withBase, useData } from 'vitepress'
-import { EXTERNAL_URL_RE } from '../../shared.js'
+import { isExternal } from '../../shared.js'
 
-export const HASH_RE = /#.*$/
-export const EXT_RE = /(index)?\.(md|html)$/
-
-const inBrowser = typeof window !== 'undefined'
-const hashRef = ref(inBrowser ? location.hash : '')
-
-export function isExternal(path: string): boolean {
-  return EXTERNAL_URL_RE.test(path)
-}
+export { isExternal, isActive } from '../../shared.js'
 
 export function throttleAndDebounce(fn: () => void, delay: number): () => void {
   let timeoutId: NodeJS.Timeout
@@ -33,42 +24,10 @@ export function throttleAndDebounce(fn: () => void, delay: number): () => void {
   }
 }
 
-export function isActive(
-  currentPath: string,
-  matchPath?: string,
-  asRegex: boolean = false
-): boolean {
-  if (matchPath === undefined) {
-    return false
-  }
-
-  currentPath = normalize(`/${currentPath}`)
-
-  if (asRegex) {
-    return new RegExp(matchPath).test(currentPath)
-  }
-
-  if (normalize(matchPath) !== currentPath) {
-    return false
-  }
-
-  const hashMatch = matchPath.match(HASH_RE)
-
-  if (hashMatch) {
-    return hashRef.value === hashMatch[0]
-  }
-
-  return true
-}
-
 export function ensureStartingSlash(path: string): string {
   return /^\//.test(path) ? path : `/${path}`
 }
 
-export function normalize(path: string): string {
-  return decodeURI(path).replace(HASH_RE, '').replace(EXT_RE, '')
-}
-
 export function normalizeLink(url: string): string {
   if (isExternal(url)) {
     return url
diff --git a/src/node/build/render.ts b/src/node/build/render.ts
index 55e1adf3772e..87fb662a3fd5 100644
--- a/src/node/build/render.ts
+++ b/src/node/build/render.ts
@@ -10,10 +10,11 @@ import {
   createTitle,
   notFoundPageData,
   mergeHead,
-  EXTERNAL_URL_RE
+  EXTERNAL_URL_RE,
+  resolveSiteDataByRoute
 } from '../shared'
 import { slash } from '../utils/slash'
-import { SiteConfig, resolveSiteDataByRoute } from '../config'
+import { SiteConfig } from '../config'
 
 export async function renderPage(
   render: (path: string) => Promise<string>,
diff --git a/src/node/config.ts b/src/node/config.ts
index 11849089d06a..bc1500564014 100644
--- a/src/node/config.ts
+++ b/src/node/config.ts
@@ -13,9 +13,9 @@ import {
   SiteData,
   HeadConfig,
   LocaleConfig,
+  LocaleSpecificConfig,
   DefaultTheme,
   APPEARANCE_KEY,
-  createLangDictionary,
   CleanUrlsMode,
   PageData,
   Awaitable
@@ -24,23 +24,27 @@ import { DEFAULT_THEME_PATH } from './alias'
 import { MarkdownOptions } from './markdown/markdown'
 import _debug from 'debug'
 
-export { resolveSiteDataByRoute } from './shared'
-
 const debug = _debug('vitepress:config')
 
-export interface UserConfig<ThemeConfig = any> {
+export interface UserConfig<ThemeConfig = any>
+  extends LocaleSpecificConfig<ThemeConfig> {
   extends?: RawConfigExports<ThemeConfig>
+
   base?: string
-  lang?: string
-  title?: string
-  titleTemplate?: string | boolean
-  description?: string
-  head?: HeadConfig[]
+  srcDir?: string
+  srcExclude?: string[]
+  outDir?: string
+  shouldPreload?: (link: string, page: string) => boolean
+
+  locales?: LocaleConfig<ThemeConfig>
+
   appearance?: boolean
-  themeConfig?: ThemeConfig
-  locales?: Record<string, LocaleConfig>
-  markdown?: MarkdownOptions
   lastUpdated?: boolean
+
+  /**
+   * MarkdownIt options
+   */
+  markdown?: MarkdownOptions
   /**
    * Options to pass on to `@vitejs/plugin-vue`
    */
@@ -50,11 +54,6 @@ export interface UserConfig<ThemeConfig = any> {
    */
   vite?: ViteConfig
 
-  srcDir?: string
-  srcExclude?: string[]
-  outDir?: string
-  shouldPreload?: (link: string, page: string) => boolean
-
   /**
    * Configure the scroll offset when the theme has a sticky header.
    * Can be a number or a selector element to get the offset from.
@@ -311,7 +310,6 @@ export async function resolveSiteData(
     appearance: userConfig.appearance ?? true,
     themeConfig: userConfig.themeConfig || {},
     locales: userConfig.locales || {},
-    langs: createLangDictionary(userConfig),
     scrollOffset: userConfig.scrollOffset || 90,
     cleanUrls: userConfig.cleanUrls || 'disabled'
   }
@@ -329,8 +327,8 @@ function resolveSiteDataHead(userConfig?: UserConfig): HeadConfig[] {
       `
         ;(() => {
           const saved = localStorage.getItem('${APPEARANCE_KEY}')
-          const prefereDark = window.matchMedia('(prefers-color-scheme: dark)').matches
-          if (!saved || saved === 'auto' ? prefereDark : saved === 'dark') {
+          const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+          if (!saved || saved === 'auto' ? prefersDark : saved === 'dark') {
             document.documentElement.classList.add('dark')
           }
         })()
diff --git a/src/node/index.ts b/src/node/index.ts
index 8dde346a7158..21b055cf4662 100644
--- a/src/node/index.ts
+++ b/src/node/index.ts
@@ -9,6 +9,5 @@ export type {
   SiteData,
   HeadConfig,
   Header,
-  LocaleConfig,
   DefaultTheme
 } from '../../types/shared'
diff --git a/src/node/markdown/markdown.ts b/src/node/markdown/markdown.ts
index bd9c3aef2999..c99e9705f4a6 100644
--- a/src/node/markdown/markdown.ts
+++ b/src/node/markdown/markdown.ts
@@ -24,7 +24,8 @@ import { snippetPlugin } from './plugins/snippet'
 import { preWrapperPlugin } from './plugins/preWrapper'
 import { linkPlugin } from './plugins/link'
 import { imagePlugin } from './plugins/image'
-import { Header } from '../shared'
+
+export type { Header } from '../shared'
 
 export type ThemeOptions =
   | IThemeRegistration
@@ -50,8 +51,6 @@ export interface MarkdownOptions extends MarkdownIt.Options {
 
 export type MarkdownRenderer = MarkdownIt
 
-export type { Header }
-
 export const createMarkdownRenderer = async (
   srcDir: string,
   options: MarkdownOptions = {},
diff --git a/src/shared/shared.ts b/src/shared/shared.ts
index 2459bafed1d5..90d5a427ba4d 100644
--- a/src/shared/shared.ts
+++ b/src/shared/shared.ts
@@ -1,15 +1,11 @@
-import {
-  SiteData,
-  PageData,
-  LocaleConfig,
-  HeadConfig
-} from '../../types/shared.js'
+import type { SiteData, PageData, HeadConfig } from '../../types/shared.js'
 
 export type {
   SiteData,
   PageData,
   HeadConfig,
   LocaleConfig,
+  LocaleSpecificConfig,
   Header,
   DefaultTheme,
   PageDataPayload,
@@ -19,6 +15,8 @@ export type {
 
 export const EXTERNAL_URL_RE = /^[a-z]+:/i
 export const APPEARANCE_KEY = 'vitepress-theme-appearance'
+export const HASH_RE = /#.*$/
+export const EXT_RE = /(index)?\.(md|html)$/
 
 export const inBrowser = typeof window !== 'undefined'
 
@@ -31,71 +29,70 @@ export const notFoundPageData: PageData = {
   lastUpdated: 0
 }
 
-function findMatchRoot(route: string, roots: string[]): string | undefined {
-  // first match to the routes with the most deep level.
-  roots.sort((a, b) => {
-    const levelDelta = b.split('/').length - a.split('/').length
-    if (levelDelta !== 0) {
-      return levelDelta
-    } else {
-      return b.length - a.length
-    }
-  })
+export function isActive(
+  currentPath: string,
+  matchPath?: string,
+  asRegex: boolean = false
+): boolean {
+  if (matchPath === undefined) {
+    return false
+  }
+
+  currentPath = normalize(`/${currentPath}`)
 
-  for (const r of roots) {
-    if (route.startsWith(r)) return r
+  if (asRegex) {
+    return new RegExp(matchPath).test(currentPath)
   }
+
+  if (normalize(matchPath) !== currentPath) {
+    return false
+  }
+
+  const hashMatch = matchPath.match(HASH_RE)
+
+  if (hashMatch) {
+    return (inBrowser ? location.hash : '') === hashMatch[0]
+  }
+
+  return true
 }
 
-function resolveLocales<T>(
-  locales: Record<string, T>,
-  route: string
-): T | undefined {
-  const localeRoot = findMatchRoot(route, Object.keys(locales))
-  return localeRoot ? locales[localeRoot] : undefined
+export function normalize(path: string): string {
+  return decodeURI(path).replace(HASH_RE, '').replace(EXT_RE, '')
 }
 
-export function createLangDictionary(siteData: {
-  themeConfig?: Record<string, any>
-  locales?: Record<string, LocaleConfig>
-}) {
-  const { locales } = siteData.themeConfig || {}
-  const siteLocales = siteData.locales
-  return locales && siteLocales
-    ? Object.keys(locales).reduce((langs, path) => {
-        langs[path] = {
-          label: locales![path].label,
-          lang: siteLocales[path].lang
-        }
-        return langs
-      }, {} as Record<string, { lang: string; label: string }>)
-    : {}
+export function isExternal(path: string): boolean {
+  return EXTERNAL_URL_RE.test(path)
 }
 
-// this merges the locales data to the main data by the route
+/**
+ * this merges the locales data to the main data by the route
+ */
 export function resolveSiteDataByRoute(
   siteData: SiteData,
-  route: string
+  relativePath: string
 ): SiteData {
-  route = cleanRoute(siteData, route)
-
-  const localeData = resolveLocales(siteData.locales || {}, route)
-  const localeThemeConfig = resolveLocales<any>(
-    siteData.themeConfig.locales || {},
-    route
-  )
-
-  // avoid object rest spread since this is going to run in the browser
-  // and spread is going to result in polyfill code
-  return Object.assign({}, siteData, localeData, {
-    themeConfig: Object.assign({}, siteData.themeConfig, localeThemeConfig, {
-      // clean the locales to reduce the bundle size
-      locales: {}
-    }),
-    lang: (localeData || siteData).lang,
-    // clean the locales to reduce the bundle size
-    locales: {},
-    langs: createLangDictionary(siteData)
+  const localeIndex =
+    Object.keys(siteData.locales).find(
+      (key) =>
+        key !== 'root' &&
+        !isExternal(key) &&
+        isActive(relativePath, `/${key}/`, true)
+    ) || 'root'
+
+  if (localeIndex === 'root') return siteData
+
+  return Object.assign({}, siteData, {
+    localeIndex,
+    lang: siteData.locales[localeIndex].lang ?? siteData.lang,
+    title: siteData.locales[localeIndex].title ?? siteData.title,
+    titleTemplate:
+      siteData.locales[localeIndex].titleTemplate ?? siteData.titleTemplate,
+    description:
+      siteData.locales[localeIndex].description ?? siteData.description,
+    head: mergeHead(siteData.locales[localeIndex].head ?? [], siteData.head),
+    themeConfig:
+      siteData.locales[localeIndex].themeConfig ?? siteData.themeConfig
   })
 }
 
@@ -134,20 +131,6 @@ function createTitleTemplate(
   return ` | ${template}`
 }
 
-/**
- * Clean up the route by removing the `base` path if it's set in config.
- */
-function cleanRoute(siteData: SiteData, route: string): string {
-  if (!inBrowser) {
-    return route
-  }
-
-  const base = siteData.base
-  const baseWithoutSuffix = base.endsWith('/') ? base.slice(0, -1) : base
-
-  return route.slice(baseWithoutSuffix.length)
-}
-
 function hasTag(head: HeadConfig[], tag: HeadConfig) {
   const [tagType, tagAttrs] = tag
   if (tagType !== 'meta') return false
diff --git a/types/default-theme.d.ts b/types/default-theme.d.ts
index 36ba6f0d68f4..041a091822af 100644
--- a/types/default-theme.d.ts
+++ b/types/default-theme.d.ts
@@ -20,13 +20,6 @@ export namespace DefaultTheme {
      */
     outline?: number | [number, number] | 'deep' | false
 
-    /**
-     * Custom outline title in the aside component.
-     *
-     * @default 'On this page'
-     */
-    outlineTitle?: string
-
     /**
      * The nav items.
      */
@@ -43,18 +36,6 @@ export namespace DefaultTheme {
      */
     editLink?: EditLink
 
-    /**
-     * Set custom last updated text.
-     *
-     * @default 'Last updated'
-     */
-    lastUpdatedText?: string
-
-    /**
-     * Set custom prev/next labels.
-     */
-    docFooter?: DocFooter
-
     /**
      * The social links to be displayed at the end of the nav bar. Perfect for
      * placing links to social services such as GitHub, Twitter, Facebook, etc.
@@ -66,12 +47,6 @@ export namespace DefaultTheme {
      */
     footer?: Footer
 
-    /**
-     * Adds locale menu to the nav. This option should be used when you have
-     * your translated sites outside of the project.
-     */
-    localeLinks?: LocaleLinks
-
     /**
      * The algolia options. Leave it undefined to disable the search feature.
      */
@@ -81,6 +56,48 @@ export namespace DefaultTheme {
      * The carbon ads options. Leave it undefined to disable the ads feature.
      */
     carbonAds?: CarbonAdsOptions
+
+    /**
+     * Custom labels
+     */
+    translations?: {
+      /**
+       * @default 'On this page'
+       */
+      outlineTitle?: string
+
+      /**
+       * @default 'Last updated'
+       */
+      lastUpdatedText?: string
+
+      docFooter?: {
+        /**
+         * @default 'Previous page'
+         */
+        prev?: string
+
+        /**
+         * @default 'Next page'
+         */
+        next?: string
+      }
+
+      /**
+       * @default 'Appearance'
+       */
+      darkModeSwitchLabel?: string
+
+      /**
+       * @default 'Menu'
+       */
+      sidebarMenuLabel?: string
+
+      /**
+       * @default 'Return to top'
+       */
+      returnToTopLabel?: string
+    }
   }
 
   // nav -----------------------------------------------------------------------
@@ -168,24 +185,6 @@ export namespace DefaultTheme {
     text?: string
   }
 
-  // prev-next -----------------------------------------------------------------
-
-  export interface DocFooter {
-    /**
-     * Custom label for previous page button.
-     *
-     * @default 'Previous page'
-     */
-    prev?: string
-
-    /**
-     * Custom label for next page button.
-     *
-     * @default 'Next page'
-     */
-    next?: string
-  }
-
   // social link ---------------------------------------------------------------
 
   export interface SocialLink {
@@ -224,18 +223,6 @@ export namespace DefaultTheme {
     sponsor?: string
   }
 
-  // locales -------------------------------------------------------------------
-
-  export interface LocaleLinks {
-    text: string
-    items: LocaleLink[]
-  }
-
-  export interface LocaleLink {
-    text: string
-    link: string
-  }
-
   // algolia ------------------------------------------------------------------
 
   /**
diff --git a/types/shared.d.ts b/types/shared.d.ts
index f37194dc1c24..ee1ace4c1f2c 100644
--- a/types/shared.d.ts
+++ b/types/shared.d.ts
@@ -50,14 +50,7 @@ export type CleanUrlsMode =
 export interface SiteData<ThemeConfig = any> {
   base: string
   cleanUrls?: CleanUrlsMode
-
-  /**
-   * Language of the site as it should be set on the `html` element.
-   *
-   * @example `en-US`, `zh-CN`
-   */
   lang: string
-
   title: string
   titleTemplate?: string | boolean
   description: string
@@ -65,45 +58,29 @@ export interface SiteData<ThemeConfig = any> {
   appearance: boolean
   themeConfig: ThemeConfig
   scrollOffset: number | string
-  locales: Record<string, LocaleConfig>
-
-  /**
-   * Available locales for the site when it has defined `locales` in its
-   * `themeConfig`. This object is otherwise empty. Keys are paths like `/` or
-   * `/zh/`.
-   */
-  langs: Record<
-    string,
-    {
-      /**
-       * Lang attribute as set on the `<html>` element.
-       * @example `en-US`, `zh-CN`
-       */
-      lang: string
-      /**
-       * Label to display in the language menu.
-       * @example `English`, `简体中文`
-       */
-      label: string
-    }
-  >
+  locales: LocaleConfig<ThemeConfig>
+  localeIndex?: string
 }
 
 export type HeadConfig =
   | [string, Record<string, string>]
   | [string, Record<string, string>, string]
 
-export interface LocaleConfig {
-  lang: string
+export interface PageDataPayload {
+  path: string
+  pageData: PageData
+}
+
+export interface LocaleSpecificConfig<ThemeConfig = any> {
+  lang?: string
   title?: string
   titleTemplate?: string | boolean
   description?: string
   head?: HeadConfig[]
-  label?: string
-  selectText?: string
+  themeConfig?: ThemeConfig
 }
 
-export interface PageDataPayload {
-  path: string
-  pageData: PageData
-}
+export type LocaleConfig<ThemeConfig = any> = Record<
+  string,
+  LocaleSpecificConfig<ThemeConfig> & { label: string; link?: string }
+>