From d0eb32fe855da715104b7947e539a5cefd67b39d Mon Sep 17 00:00:00 2001
From: richardo2016 <richardo2016@gmail.com>
Date: Sat, 6 Aug 2022 19:43:29 +0800
Subject: [PATCH 1/8] feat(theme-default): add built-in component `VPBadge`,
 registerd as global component `Badge`.

---
 docs/.vitepress/config.ts                     |  1 +
 docs/guide/theme-badge.md                     | 75 +++++++++++++++++++
 src/client/app/index.ts                       |  3 +-
 .../theme-default/components/VPBadge.vue      | 51 +++++++++++++
 src/client/theme-default/index.ts             |  1 +
 src/client/theme-default/styles/vars.css      | 11 +++
 6 files changed, 141 insertions(+), 1 deletion(-)
 create mode 100644 docs/guide/theme-badge.md
 create mode 100644 src/client/theme-default/components/VPBadge.vue

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 30a0fcd55f4d..d5fc2c373a6b 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -100,6 +100,7 @@ function sidebarGuide() {
         { text: 'Layout', link: '/guide/theme-layout' },
         { text: 'Home Page', link: '/guide/theme-home-page' },
         { text: 'Team Page', link: '/guide/theme-team-page' },
+        { text: 'Badge', link: '/guide/theme-badge' },
         { text: 'Footer', link: '/guide/theme-footer' },
         { text: 'Search', link: '/guide/theme-search' },
         { text: 'Carbon Ads', link: '/guide/theme-carbon-ads' }
diff --git a/docs/guide/theme-badge.md b/docs/guide/theme-badge.md
new file mode 100644
index 000000000000..4bdfb8c9d4de
--- /dev/null
+++ b/docs/guide/theme-badge.md
@@ -0,0 +1,75 @@
+# Badge
+
+The badge is like the one with same name in [vuepress](https://vuepress.vuejs.org/guide/using-vue.html#built-in-components), but for vitepress.
+
+## Usage
+
+You can use this component in a header to add some status for an API
+
+```js
+### Title <Badge text="info" type="info" />
+### Title <Badge text="tip" type="tip" />
+### Title <Badge text="warning" type="warning" />
+### Title <Badge text="error" type="error" />
+```
+
+Code above renders like:
+
+### Title <Badge text="info" type="info" />
+### Title <Badge text="tip" type="tip" />
+### Title <Badge text="warning" type="warning" />
+### Title <Badge text="error" type="error" />
+
+## Custom Children
+
+`<Badge>` accept `children`, which will be displayed in the badge.
+
+Give Code like this:
+
+```js
+<script setup>
+import { Badge } from 'vitepress/theme'
+</script>
+
+### Title <Badge type="info"><span>custom element</span></Badge>
+```
+
+You will see
+
+### Title <Badge type="info"><span>custom element</span></Badge>
+
+## `<Badge>`
+
+`<Badge />` accept props:
+
+- `text`: string
+- `type`: string, optional value: `"tip" | "info" | "warning"| "error"`, defaults to `"tip"`.
+- `vertical`: string, optional value: `"top"| "middle"`, defaults to `"top"`.
+
+**P.S** `props.text` would not be used if children given,  Actually, the `props.text` is passed as default slot children.
+
+## Customize Type Color
+
+The background color of `<Badge />` is determined by css vars.
+
+```jsx
+/* background-color by var(--vp-c-badge-type-warning); */
+<Badge type="warning" />
+
+/* background-color by var(--vp-c-badge-type-tip); */
+<Badge type="tip" />
+
+/* background-color by var(--vp-c-badge-type-error); */
+<Badge type="error" />
+
+/* background-color by var(--vp-c-badge-type-info); */
+<Badge type="info" />
+```
+
+you can customize `background-color` of typed `<Badge />` by override css vars.
+
+```css
+:root {
+    --vp-c-badge-type-error: red;
+}
+```
\ No newline at end of file
diff --git a/src/client/app/index.ts b/src/client/app/index.ts
index 7fcfc53a95a7..f2511610ba68 100644
--- a/src/client/app/index.ts
+++ b/src/client/app/index.ts
@@ -6,7 +6,7 @@ import {
   onMounted,
   watch
 } from 'vue'
-import Theme from '/@theme/index'
+import Theme, { VPBadge } from '/@theme/index'
 import { inBrowser, pathToFile } from './utils'
 import { Router, RouterSymbol, createRouter } from './router'
 import { siteDataRef, useData } from './data'
@@ -55,6 +55,7 @@ export function createApp() {
   // install global components
   app.component('Content', Content)
   app.component('ClientOnly', ClientOnly)
+  app.component('Badge', VPBadge)
 
   // expose $frontmatter
   Object.defineProperty(app.config.globalProperties, '$frontmatter', {
diff --git a/src/client/theme-default/components/VPBadge.vue b/src/client/theme-default/components/VPBadge.vue
new file mode 100644
index 000000000000..19596afe8f93
--- /dev/null
+++ b/src/client/theme-default/components/VPBadge.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    text?: string,
+    type?: 'warning' | 'tip' | 'error' | 'info'
+    vertical?: 'top' | 'middle'
+  }>(), {
+    text: '',
+    type: 'tip',
+    vertical: 'top',
+  }
+);
+</script>
+
+<template>
+  <span
+    class='VPBadge'
+    :class="[ `VPBadge-type-${props.type}` ]"
+    :style="{ 'vertical-align': props.vertical }"
+  >
+    <slot>{{ props.text }}</slot>
+  </span>
+</template>
+
+<style scoped>
+.VPBadge {
+  display: inline-block;
+  font-size: 14px;
+  height: 18px;
+  line-height: 18px;
+  border-radius: 3px;
+  padding: 0 6px;
+  color: #fff;
+}
+
+.VPBadge.VPBadge-type-warning {
+  background-color: var(--vp-c-badge-type-warning);
+}
+
+.VPBadge.VPBadge-type-tip {
+  background-color: var(--vp-c-badge-type-tip);
+}
+
+.VPBadge.VPBadge-type-error {
+  background-color: var(--vp-c-badge-type-error);
+}
+
+.VPBadge.VPBadge-type-info {
+  background-color: var(--vp-c-badge-type-info);
+}
+</style>
\ No newline at end of file
diff --git a/src/client/theme-default/index.ts b/src/client/theme-default/index.ts
index 7b7921283586..1f24d530cda8 100644
--- a/src/client/theme-default/index.ts
+++ b/src/client/theme-default/index.ts
@@ -19,6 +19,7 @@ export { default as VPTeamPage } from './components/VPTeamPage.vue'
 export { default as VPTeamPageTitle } from './components/VPTeamPageTitle.vue'
 export { default as VPTeamPageSection } from './components/VPTeamPageSection.vue'
 export { default as VPTeamMembers } from './components/VPTeamMembers.vue'
+export { default as VPBadge } from './components/VPBadge.vue'
 
 const theme: Theme = {
   Layout,
diff --git a/src/client/theme-default/styles/vars.css b/src/client/theme-default/styles/vars.css
index 5b09364b911c..64655a3dd4e6 100644
--- a/src/client/theme-default/styles/vars.css
+++ b/src/client/theme-default/styles/vars.css
@@ -358,3 +358,14 @@
   --vp-home-hero-image-background-image: none;
   --vp-home-hero-image-filter: none;
 }
+
+/**
+ * Component: Badge
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-c-badge-type-warning: #e7c000;
+  --vp-c-badge-type-tip: #42b983;
+  --vp-c-badge-type-error: #da5961;
+  --vp-c-badge-type-info: #0170fe;
+}

From 9cf549ebb1c1a2b5b6149eb0927b7fd98d481dc6 Mon Sep 17 00:00:00 2001
From: szsascha <>
Date: Thu, 25 Aug 2022 20:23:12 +0200
Subject: [PATCH 2/8] feat(theme-default): add built-in global component Badge

Make badge available via enhanceApp instead of globally.
---
 src/client/app/index.ts           | 3 +--
 src/client/theme-default/index.ts | 7 +++++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/client/app/index.ts b/src/client/app/index.ts
index f2511610ba68..7fcfc53a95a7 100644
--- a/src/client/app/index.ts
+++ b/src/client/app/index.ts
@@ -6,7 +6,7 @@ import {
   onMounted,
   watch
 } from 'vue'
-import Theme, { VPBadge } from '/@theme/index'
+import Theme from '/@theme/index'
 import { inBrowser, pathToFile } from './utils'
 import { Router, RouterSymbol, createRouter } from './router'
 import { siteDataRef, useData } from './data'
@@ -55,7 +55,6 @@ export function createApp() {
   // install global components
   app.component('Content', Content)
   app.component('ClientOnly', ClientOnly)
-  app.component('Badge', VPBadge)
 
   // expose $frontmatter
   Object.defineProperty(app.config.globalProperties, '$frontmatter', {
diff --git a/src/client/theme-default/index.ts b/src/client/theme-default/index.ts
index 1f24d530cda8..bacd1fd67911 100644
--- a/src/client/theme-default/index.ts
+++ b/src/client/theme-default/index.ts
@@ -10,6 +10,7 @@ import './styles/components/vp-sponsor.css'
 import { Theme } from 'vitepress'
 import Layout from './Layout.vue'
 import NotFound from './NotFound.vue'
+import VPBadge from './components/VPBadge.vue'
 
 export { default as VPHomeHero } from './components/VPHomeHero.vue'
 export { default as VPHomeFeatures } from './components/VPHomeFeatures.vue'
@@ -19,11 +20,13 @@ export { default as VPTeamPage } from './components/VPTeamPage.vue'
 export { default as VPTeamPageTitle } from './components/VPTeamPageTitle.vue'
 export { default as VPTeamPageSection } from './components/VPTeamPageSection.vue'
 export { default as VPTeamMembers } from './components/VPTeamMembers.vue'
-export { default as VPBadge } from './components/VPBadge.vue'
 
 const theme: Theme = {
   Layout,
-  NotFound
+  NotFound,
+  enhanceApp(ctx) {
+    ctx.app.component('Badge', VPBadge)
+  }
 }
 
 export default theme

From 320441ead51b0a45b3a53086e817e0e9a96f86d1 Mon Sep 17 00:00:00 2001
From: szsascha <>
Date: Tue, 30 Aug 2022 21:23:11 +0200
Subject: [PATCH 3/8] feat(theme-default): add built-in global component Badge.

Add trailing new line to VPBadge.vue
---
 src/client/theme-default/components/VPBadge.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/client/theme-default/components/VPBadge.vue b/src/client/theme-default/components/VPBadge.vue
index 19596afe8f93..c5a22a925788 100644
--- a/src/client/theme-default/components/VPBadge.vue
+++ b/src/client/theme-default/components/VPBadge.vue
@@ -48,4 +48,4 @@ const props = withDefaults(
 .VPBadge.VPBadge-type-info {
   background-color: var(--vp-c-badge-type-info);
 }
-</style>
\ No newline at end of file
+</style>

From 980a83413b4428140f90d23a20cbd99deae3a260 Mon Sep 17 00:00:00 2001
From: szsascha <>
Date: Wed, 31 Aug 2022 20:56:32 +0200
Subject: [PATCH 4/8] feat(theme-default): add built-in global component Badge.

Use existing color variables for badges.
---
 src/client/theme-default/styles/vars.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/client/theme-default/styles/vars.css b/src/client/theme-default/styles/vars.css
index 64655a3dd4e6..196be36245b3 100644
--- a/src/client/theme-default/styles/vars.css
+++ b/src/client/theme-default/styles/vars.css
@@ -364,8 +364,8 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-  --vp-c-badge-type-warning: #e7c000;
-  --vp-c-badge-type-tip: #42b983;
-  --vp-c-badge-type-error: #da5961;
-  --vp-c-badge-type-info: #0170fe;
+  --vp-c-badge-type-warning: var(--vp-c-yellow-dark);
+  --vp-c-badge-type-tip: var(--vp-c-green);
+  --vp-c-badge-type-error: var(--vp-c-red);
+  --vp-c-badge-type-info: var(--vp-c-gray);
 }

From 20af65ddba49ad34fd1dd58575c1395f0d45411e Mon Sep 17 00:00:00 2001
From: Kia Ishii <kia.king.08@gmail.com>
Date: Thu, 20 Oct 2022 19:05:30 +0900
Subject: [PATCH 5/8] refactor a bit

---
 docs/guide/theme-badge.md                     | 96 ++++++++++---------
 .../theme-default/components/VPBadge.vue      | 64 +++++++------
 src/client/theme-default/index.ts             |  1 +
 src/client/theme-default/styles/vars.css      | 33 ++++++-
 4 files changed, 116 insertions(+), 78 deletions(-)

diff --git a/docs/guide/theme-badge.md b/docs/guide/theme-badge.md
index 4bdfb8c9d4de..20d7346c223d 100644
--- a/docs/guide/theme-badge.md
+++ b/docs/guide/theme-badge.md
@@ -1,75 +1,83 @@
 # Badge
 
-The badge is like the one with same name in [vuepress](https://vuepress.vuejs.org/guide/using-vue.html#built-in-components), but for vitepress.
+The badge lets you add status to your header. For example, it could be useful to specify the section's type, or supported version.
 
 ## Usage
 
-You can use this component in a header to add some status for an API
+You may use the `Badge` component which is globally available.
 
-```js
-### Title <Badge text="info" type="info" />
-### Title <Badge text="tip" type="tip" />
-### Title <Badge text="warning" type="warning" />
-### Title <Badge text="error" type="error" />
+```html
+### Title <Badge type="info" text="default" />
+### Title <Badge type="tip" text="^1.9.0" />
+### Title <Badge type="warning" text="beta" />
+### Title <Badge type="danger" text="caution" />
 ```
 
 Code above renders like:
 
-### Title <Badge text="info" type="info" />
-### Title <Badge text="tip" type="tip" />
-### Title <Badge text="warning" type="warning" />
-### Title <Badge text="error" type="error" />
+### Title <Badge type="info" text="default" vertical="middle" />
+### Title <Badge type="tip" text="^1.9.0" vertical="middle" />
+### Title <Badge type="warning" text="beta" vertical="middle" />
+### Title <Badge type="danger" text="caution" vertical="middle" />
 
 ## Custom Children
 
 `<Badge>` accept `children`, which will be displayed in the badge.
 
-Give Code like this:
-
-```js
-<script setup>
-import { Badge } from 'vitepress/theme'
-</script>
-
-### Title <Badge type="info"><span>custom element</span></Badge>
+```html
+### Title <Badge type="info">custom element</Badge>
 ```
 
-You will see
+### Title <Badge type="info">custom element</Badge>
 
-### Title <Badge type="info"><span>custom element</span></Badge>
-
-## `<Badge>`
+## Customize Type Color
 
-`<Badge />` accept props:
+you can customize `background-color` of typed `<Badge />` by override css vars. The following is he default values.
 
-- `text`: string
-- `type`: string, optional value: `"tip" | "info" | "warning"| "error"`, defaults to `"tip"`.
-- `vertical`: string, optional value: `"top"| "middle"`, defaults to `"top"`.
+```css
+:root {
+  --vp-badge-info-border: var(--vp-c-divider-light);
+  --vp-badge-info-text: var(--vp-c-text-2);
+  --vp-badge-info-bg: var(--vp-c-white-soft);
 
-**P.S** `props.text` would not be used if children given,  Actually, the `props.text` is passed as default slot children.
+  --vp-badge-tip-border: var(--vp-c-green-dimm-1);
+  --vp-badge-tip-text: var(--vp-c-green-darker);
+  --vp-badge-tip-bg: var(--vp-c-green-dimm-3);
 
-## Customize Type Color
+  --vp-badge-warning-border: var(--vp-c-yellow-dimm-1);
+  --vp-badge-warning-text: var(--vp-c-yellow-darker);
+  --vp-badge-warning-bg: var(--vp-c-yellow-dimm-3);
 
-The background color of `<Badge />` is determined by css vars.
+  --vp-badge-danger-border: var(--vp-c-red-dimm-1);
+  --vp-badge-danger-text: var(--vp-c-red-darker);
+  --vp-badge-danger-bg: var(--vp-c-red-dimm-3);
+}
 
-```jsx
-/* background-color by var(--vp-c-badge-type-warning); */
-<Badge type="warning" />
+.dark {
+  --vp-badge-info-border: var(--vp-c-divider-light);
+  --vp-badge-info-bg: var(--vp-c-black-mute);
 
-/* background-color by var(--vp-c-badge-type-tip); */
-<Badge type="tip" />
+  --vp-badge-tip-border: var(--vp-c-green-dimm-2);
+  --vp-badge-tip-text: var(--vp-c-green-light);
 
-/* background-color by var(--vp-c-badge-type-error); */
-<Badge type="error" />
+  --vp-badge-warning-border: var(--vp-c-yellow-dimm-2);
+  --vp-badge-warning-text: var(--vp-c-yellow-light);
 
-/* background-color by var(--vp-c-badge-type-info); */
-<Badge type="info" />
+  --vp-badge-danger-border: var(--vp-c-red-dimm-2);
+  --vp-badge-danger-text: var(--vp-c-red-light);
+}
 ```
 
-you can customize `background-color` of typed `<Badge />` by override css vars.
+## `<Badge>`
 
-```css
-:root {
-    --vp-c-badge-type-error: red;
+`<Badge>` component accepts following props:
+
+```ts
+interface Props {
+  // When `<slot>` is passed, this value gets ignored.
+  text?: string
+
+  // Defaults to `tip`.
+  type?: 'info' | 'tip' | 'warning' | 'danger'
 }
-```
\ No newline at end of file
+```
diff --git a/src/client/theme-default/components/VPBadge.vue b/src/client/theme-default/components/VPBadge.vue
index c5a22a925788..1d78c733a90c 100644
--- a/src/client/theme-default/components/VPBadge.vue
+++ b/src/client/theme-default/components/VPBadge.vue
@@ -1,51 +1,55 @@
 <script setup lang="ts">
-const props = withDefaults(
-  defineProps<{
-    text?: string,
-    type?: 'warning' | 'tip' | 'error' | 'info'
-    vertical?: 'top' | 'middle'
-  }>(), {
-    text: '',
-    type: 'tip',
-    vertical: 'top',
-  }
-);
+defineProps<{
+  text?: string
+  type?: 'info' | 'tip' | 'warning' | 'danger'
+}>()
 </script>
 
 <template>
-  <span
-    class='VPBadge'
-    :class="[ `VPBadge-type-${props.type}` ]"
-    :style="{ 'vertical-align': props.vertical }"
-  >
-    <slot>{{ props.text }}</slot>
+  <span class='VPBadge' :class="[type ?? 'tip']">
+    <slot>{{ text }}</slot>
   </span>
 </template>
 
 <style scoped>
 .VPBadge {
   display: inline-block;
-  font-size: 14px;
-  height: 18px;
+  margin-left: 2px;
+  border: 1px solid transparent;
+  border-radius: 10px;
+  padding: 0 8px;
   line-height: 18px;
-  border-radius: 3px;
-  padding: 0 6px;
-  color: #fff;
+  font-size: 13px;
+  font-weight: 600;
+  transform: translateY(-2px);
 }
 
-.VPBadge.VPBadge-type-warning {
-  background-color: var(--vp-c-badge-type-warning);
+h2 .VPBadge {
+  border-radius: 11px;
+  line-height: 20px;
 }
 
-.VPBadge.VPBadge-type-tip {
-  background-color: var(--vp-c-badge-type-tip);
+.VPBadge.info {
+  border-color: var(--vp-badge-info-border);
+  color: var(--vp-badge-info-text);
+  background-color: var(--vp-badge-info-bg);
 }
 
-.VPBadge.VPBadge-type-error {
-  background-color: var(--vp-c-badge-type-error);
+.VPBadge.tip {
+  border-color: var(--vp-badge-tip-border);
+  color: var(--vp-badge-tip-text);
+  background-color: var(--vp-badge-tip-bg);
 }
 
-.VPBadge.VPBadge-type-info {
-  background-color: var(--vp-c-badge-type-info);
+.VPBadge.warning {
+  border-color: var(--vp-badge-warning-border);
+  color: var(--vp-badge-warning-text);
+  background-color: var(--vp-badge-warning-bg);
+}
+
+.VPBadge.danger {
+  border-color: var(--vp-badge-danger-border);
+  color: var(--vp-badge-danger-text);
+  background-color: var(--vp-badge-danger-bg);
 }
 </style>
diff --git a/src/client/theme-default/index.ts b/src/client/theme-default/index.ts
index 736326c4502d..38f9cf74e582 100644
--- a/src/client/theme-default/index.ts
+++ b/src/client/theme-default/index.ts
@@ -29,6 +29,7 @@ const theme: Theme = {
   NotFound,
   enhanceApp: ({ router, app }) => {
     app.component('Badge', VPBadge)
+
     if (inBrowser) {
       router.onBeforeRouteChange = () => {
         nprogress.start()
diff --git a/src/client/theme-default/styles/vars.css b/src/client/theme-default/styles/vars.css
index 196be36245b3..fb008adc74dd 100644
--- a/src/client/theme-default/styles/vars.css
+++ b/src/client/theme-default/styles/vars.css
@@ -364,8 +364,33 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-  --vp-c-badge-type-warning: var(--vp-c-yellow-dark);
-  --vp-c-badge-type-tip: var(--vp-c-green);
-  --vp-c-badge-type-error: var(--vp-c-red);
-  --vp-c-badge-type-info: var(--vp-c-gray);
+  --vp-badge-info-border: var(--vp-c-divider-light);
+  --vp-badge-info-text: var(--vp-c-text-2);
+  --vp-badge-info-bg: var(--vp-c-white-soft);
+
+  --vp-badge-tip-border: var(--vp-c-green-dimm-1);
+  --vp-badge-tip-text: var(--vp-c-green-darker);
+  --vp-badge-tip-bg: var(--vp-c-green-dimm-3);
+
+  --vp-badge-warning-border: var(--vp-c-yellow-dimm-1);
+  --vp-badge-warning-text: var(--vp-c-yellow-darker);
+  --vp-badge-warning-bg: var(--vp-c-yellow-dimm-3);
+
+  --vp-badge-danger-border: var(--vp-c-red-dimm-1);
+  --vp-badge-danger-text: var(--vp-c-red-darker);
+  --vp-badge-danger-bg: var(--vp-c-red-dimm-3);
+}
+
+.dark {
+  --vp-badge-info-border: var(--vp-c-divider-light);
+  --vp-badge-info-bg: var(--vp-c-black-mute);
+
+  --vp-badge-tip-border: var(--vp-c-green-dimm-2);
+  --vp-badge-tip-text: var(--vp-c-green-light);
+
+  --vp-badge-warning-border: var(--vp-c-yellow-dimm-2);
+  --vp-badge-warning-text: var(--vp-c-yellow-light);
+
+  --vp-badge-danger-border: var(--vp-c-red-dimm-2);
+  --vp-badge-danger-text: var(--vp-c-red-light);
 }

From c3d3d5208e82f005f328717b81df440d206c3015 Mon Sep 17 00:00:00 2001
From: Kia Ishii <kia.king.08@gmail.com>
Date: Mon, 31 Oct 2022 17:43:13 +0900
Subject: [PATCH 6/8] update docs

---
 docs/guide/theme-badge.md        | 2 +-
 docs/guide/theme-introduction.md | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/docs/guide/theme-badge.md b/docs/guide/theme-badge.md
index 20d7346c223d..99b43151c03f 100644
--- a/docs/guide/theme-badge.md
+++ b/docs/guide/theme-badge.md
@@ -1,6 +1,6 @@
 # Badge
 
-The badge lets you add status to your header. For example, it could be useful to specify the section's type, or supported version.
+The badge lets you add status to your headers. For example, it could be useful to specify the section's type, or supported version.
 
 ## Usage
 
diff --git a/docs/guide/theme-introduction.md b/docs/guide/theme-introduction.md
index 4d125a2fb93d..9f502a7a3dc9 100644
--- a/docs/guide/theme-introduction.md
+++ b/docs/guide/theme-introduction.md
@@ -10,6 +10,7 @@ VitePress comes with its default theme providing many features out of the box. L
 - [Layout](./theme-layout)
 - [Home Page](./theme-home-page)
 - [Team Page](./theme-team-page)
+- [Badge](./theme-badge)
 - [Footer](./theme-footer)
 - [Search](./theme-search)
 - [Carbon Ads](./theme-carbon-ads)
@@ -110,7 +111,10 @@ import DefaultTheme from 'vitepress/theme'
 export default {
   ...DefaultTheme,
   enhanceApp({ app }) {
-    // register global components
+    // extend default theme custom behaviour.
+    DefaultTheme.enhanceApp(ctx)
+
+    // register your custom global components
     app.component('MyGlobalComponent', /* ... */)
   }
 }

From 387f7ab288304b47ee91700320199c078417ec71 Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Mon, 31 Oct 2022 15:26:05 +0530
Subject: [PATCH 7/8] update docs and default theme types

---
 docs/guide/theme-introduction.md | 4 ++--
 docs/guide/using-vue.md          | 5 +++--
 theme.d.ts                       | 2 ++
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/docs/guide/theme-introduction.md b/docs/guide/theme-introduction.md
index 9f502a7a3dc9..c59585b045bb 100644
--- a/docs/guide/theme-introduction.md
+++ b/docs/guide/theme-introduction.md
@@ -110,12 +110,12 @@ import DefaultTheme from 'vitepress/theme'
 
 export default {
   ...DefaultTheme,
-  enhanceApp({ app }) {
+  enhanceApp(ctx) {
     // extend default theme custom behaviour.
     DefaultTheme.enhanceApp(ctx)
 
     // register your custom global components
-    app.component('MyGlobalComponent', /* ... */)
+    ctx.app.component('MyGlobalComponent' /* ... */)
   }
 }
 ```
diff --git a/docs/guide/using-vue.md b/docs/guide/using-vue.md
index 998d3aa86386..600600eab2ae 100644
--- a/docs/guide/using-vue.md
+++ b/docs/guide/using-vue.md
@@ -113,8 +113,9 @@ import DefaultTheme from 'vitepress/theme'
 
 export default {
   ...DefaultTheme,
-  enhanceApp({ app }) {
-    app.component('VueClickAwayExample', VueClickAwayExample)
+  enhanceApp(ctx) {
+    DefaultTheme.enhanceApp(ctx)
+    ctx.app.component('VueClickAwayExample', VueClickAwayExample)
   }
 }
 ```
diff --git a/theme.d.ts b/theme.d.ts
index 553f02a04b5e..1848e45bcc50 100644
--- a/theme.d.ts
+++ b/theme.d.ts
@@ -1,5 +1,6 @@
 // so that users can do `import DefaultTheme from 'vitepress/theme'`
 import type { DefineComponent } from 'vue'
+import { EnhanceAppContext } from './dist/client/index.js'
 
 // TODO: add props for these
 export const VPHomeHero: DefineComponent
@@ -14,6 +15,7 @@ export const VPTeamMembers: DefineComponent
 declare const theme: {
   Layout: DefineComponent
   NotFound: DefineComponent
+  enhanceApp: (ctx: EnhanceAppContext) => void
 }
 
 export default theme

From 8bcfce8d9ae14536c85b8118a50a2c89639fee1a Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Mon, 31 Oct 2022 15:29:40 +0530
Subject: [PATCH 8/8] format

---
 src/client/theme-default/components/VPBadge.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/client/theme-default/components/VPBadge.vue b/src/client/theme-default/components/VPBadge.vue
index 1d78c733a90c..0d7d20d4dfdf 100644
--- a/src/client/theme-default/components/VPBadge.vue
+++ b/src/client/theme-default/components/VPBadge.vue
@@ -6,7 +6,7 @@ defineProps<{
 </script>
 
 <template>
-  <span class='VPBadge' :class="[type ?? 'tip']">
+  <span class="VPBadge" :class="type ?? 'tip'">
     <slot>{{ text }}</slot>
   </span>
 </template>