feat(theme)!: final re-brand (#2727)

Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Co-authored-by: Lehoczky Zoltán <ifjlehoczkyzoltan@gmail.com>

docs/.vitepress/config.ts

@@ -20,7 +20,22 @@ export default defineConfig({
   },
 
   head: [
-    ['meta', { name: 'theme-color', content: '#3c8772' }],
+    ['link', { rel: 'icon', href: '/vitepress-logo-mini.svg' }],
+    ['meta', { name: 'theme-color', content: '#5f67ee' }],
+    ['meta', { name: 'og:type', content: 'website' }],
+    ['meta', { name: 'og:locale', content: 'en' }],
+    ['meta', { name: 'og:site_name', content: 'VitePress' }],
+    [
+      'meta',
+      { name: 'og:image', content: 'https://vitepress.dev/vitepress-og.jpg' }
+    ],
+    [
+      'meta',
+      {
+        name: 'twitter:image',
+        content: 'https://vitepress.dev/vitepress-og.jpg'
+      }
+    ],
     [
       'script',
       {
@@ -33,6 +48,8 @@ export default defineConfig({
   ],
 
   themeConfig: {
+    logo: { src: '/vitepress-logo-mini.svg', width: 24, height: 24 },
+
     nav: nav(),
 
     sidebar: {

docs/index.md

@@ -15,6 +15,9 @@ hero:
     - theme: alt
       text: View on GitHub
       link: https://github.com/vuejs/vitepress
+  image:
+    src: /vitepress-logo-large.webp
+    alt: VitePress
 
 features:
   - icon: 📝
@@ -30,3 +33,24 @@ features:
     title: Ship Fast Sites
     details: Fast initial load with static HTML, fast post-load navigation with client-side routing.
 ---
+<style>
+:root {
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe 30%, #41d1ff);
+
+  --vp-home-hero-image-background-image: linear-gradient(-45deg, #bd34fe 50%, #47caff 50%);
+  --vp-home-hero-image-filter: blur(40px);
+}
+
+@media (min-width: 640px) {
+  :root {
+    --vp-home-hero-image-filter: blur(56px);
+  }
+}
+
+@media (min-width: 960px) {
+  :root {
+    --vp-home-hero-image-filter: blur(72px);
+  }
+}
+</style>

docs/public/vitepress-logo-mini.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 48 48"><g clip-path="url(#a)"><path fill="#fff" d="M32.058.157 9.612 3.31c-3.1.436-5.262 3.283-4.83 6.36L9.48 43.09c.432 3.077 3.295 5.218 6.394 4.782L38.32 44.72c3.1-.436 5.261-3.283 4.83-6.36L38.451 4.94C38.02 1.861 35.157-.28 32.058.156Z"/><path stroke="url(#b)" stroke-width="2" d="m9.263 4.37 23.422-3.292c2.3-.323 4.39 1.246 4.7 3.46l4.85 34.5c.31 2.215-1.266 4.299-3.566 4.622l-23.422 3.292c-2.3.323-4.39-1.245-4.701-3.46l-4.849-34.5c-.31-2.215 1.266-4.299 3.566-4.622Z"/><mask id="c" width="27" height="26" x="11" y="11" maskUnits="userSpaceOnUse" style="mask-type:luminance"><path fill="#fff" d="m33.99 11.252-22.446 3.154 3.131 22.281 22.446-3.154-3.13-22.281Z"/></mask><g mask="url(#c)"><path fill="url(#d)" d="m33.885 14.614-7.523 19.562a.55.55 0 0 1-.953.138L12.585 17.609a.556.556 0 0 1 .457-.896l10.34.398a.546.546 0 0 0 .194-.027l9.618-3.2a.556.556 0 0 1 .69.73Z"/><path fill="url(#e)" d="m27.595 12.239-7.247 2.52a.278.278 0 0 0-.185.284l.638 7.867a.277.277 0 0 0 .374.238l2.008-.774a.277.277 0 0 1 .375.277l-.189 3.129a.277.277 0 0 0 .393.27l1.226-.573c.19-.088.406.06.393.271l-.308 4.916c-.02.307.398.414.526.135l.086-.186 4.358-13.066a.278.278 0 0 0-.352-.353l-2.078.716a.278.278 0 0 1-.363-.303l.71-5.065a.278.278 0 0 0-.365-.303Z"/></g></g><defs><linearGradient id="b" x1="3.167" x2="44.035" y1="3.484" y2="45.26" gradientUnits="userSpaceOnUse"><stop stop-color="#49C7FF"/><stop offset="1" stop-color="#BD36FF"/></linearGradient><linearGradient id="d" x1="12.129" x2="27.183" y1="16.18" y2="31.464" gradientUnits="userSpaceOnUse"><stop stop-color="#41D1FF"/><stop offset="1" stop-color="#BD34FE"/></linearGradient><linearGradient id="e" x1="22.269" x2="26.772" y1="13.395" y2="28.739" gradientUnits="userSpaceOnUse"><stop stop-color="#FFEA83"/><stop offset=".083" stop-color="#FFDD35"/><stop offset="1" stop-color="#FFA800"/></linearGradient><clipPath id="a"><path fill="#fff" d="M0 0h48v48H0z"/></clipPath></defs></svg>

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

@@ -16,26 +16,36 @@ defineProps<{
   display: inline-block;
   margin-left: 2px;
   border: 1px solid transparent;
-  border-radius: 10px;
+  border-radius: 12px;
-  padding: 0 8px;
+  padding: 0 10px;
-  line-height: 18px;
+  line-height: 22px;
   font-size: 12px;
   font-weight: 600;
   transform: translateY(-2px);
 }
 
-h1 .VPBadge,
+.vp-doc h1 > .VPBadge {
-h2 .VPBadge,
+  margin-top: 4px;
-h3 .VPBadge,
+  vertical-align: top;
-h4 .VPBadge,
-h5 .VPBadge,
-h6 .VPBadge {
-  vertical-align: text-top;
 }
 
-h2 .VPBadge {
+.vp-doc h2 > .VPBadge {
-  border-radius: 11px;
+  margin-top: 3px;
   line-height: 20px;
+  padding: 0 8px;
+  vertical-align: top;
+}
+
+.vp-doc h3 > .VPBadge {
+  line-height: 20px;
+  vertical-align: middle;
+}
+
+.vp-doc h4 > .VPBadge,
+.vp-doc h5 > .VPBadge,
+.vp-doc h6 > .VPBadge {
+  vertical-align: middle;
+  line-height: 18px;
 }
 
 .VPBadge.info {

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

@@ -36,7 +36,7 @@ onContentUpdated(() => {
 
 <style scoped>
 .VPDocOutlineDropdown {
-  margin-bottom: 42px;
+  margin-bottom: 48px;
 }
 
 .VPDocOutlineDropdown button {
@@ -44,11 +44,12 @@ onContentUpdated(() => {
   font-size: 14px;
   font-weight: 500;
   line-height: 24px;
-  color: var(--vp-c-text-2);
-  transition: color 0.5s;
   border: 1px solid var(--vp-c-border);
   padding: 4px 12px;
+  color: var(--vp-c-text-2);
+  background-color: var(--vp-c-mute);
   border-radius: 8px;
+  transition: color 0.5s;
 }
 
 .VPDocOutlineDropdown button:hover {
@@ -63,14 +64,14 @@ onContentUpdated(() => {
 .icon {
   display: inline-block;
   vertical-align: middle;
-  margin-left: 2px;
+  width: 16px;
-  width: 14px;
+  height: 16px;
-  height: 14px;
   fill: currentColor;
 }
 
 :deep(.outline-link) {
-  font-size: 13px;
+  font-size: 14px;
+  font-weight: 400;
 }
 
 .open > .icon {
@@ -78,7 +79,7 @@ onContentUpdated(() => {
 }
 
 .items {
-  margin-top: 10px;
+  margin-top: 12px;
   border-left: 1px solid var(--vp-c-divider);
 }
 </style>

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

@@ -31,7 +31,7 @@ function onClick({ target: el }: Event) {
 }
 
 .nested {
-  padding-left: 13px;
+  padding-left: 16px;
 }
 
 .outline-link {
@@ -42,7 +42,7 @@ function onClick({ target: el }: Event) {
   overflow: hidden;
   text-overflow: ellipsis;
   transition: color 0.5s;
-  font-weight: 500;
+  font-weight: 400;
 }
 
 .outline-link:hover,

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

@@ -58,11 +58,15 @@ function scrollToTop() {
         class="items"
         @click="onItemClick"
       >
+        <div class="header">
           <a class="top-link" href="#" @click="scrollToTop">
             {{ theme.returnToTopLabel || 'Return to top' }}
           </a>
+        </div>
+        <div class="outline">
           <VPDocOutlineItem :headers="headers" />
         </div>
+      </div>
     </Transition>
   </div>
 </template>
@@ -71,6 +75,7 @@ function scrollToTop() {
 .VPLocalNavOutlineDropdown {
   padding: 12px 20px 11px;
 }
+
 .VPLocalNavOutlineDropdown button {
   display: block;
   font-size: 12px;
@@ -110,26 +115,35 @@ function scrollToTop() {
 
 .items {
   position: absolute;
-  left: 20px;
-  right: 20px;
   top: 64px;
-  background-color: var(--vp-local-nav-bg-color);
+  right: 16px;
-  padding: 4px 10px 16px;
+  left: 16px;
-  border: 1px solid var(--vp-c-divider);
+  display: grid;
+  gap: 1px;
+  border: 1px solid var(--vp-c-border);
   border-radius: 8px;
+  background-color: var(--vp-c-gutter);
   max-height: calc(var(--vp-vh, 100vh) - 86px);
   overflow: hidden auto;
   box-shadow: var(--vp-shadow-3);
 }
 
+.header {
+  background-color: var(--vp-c-bg-soft);
+}
+
 .top-link {
   display: block;
-  color: var(--vp-c-brand);
+  padding: 0 16px;
-  font-size: 13px;
+  line-height: 48px;
+  font-size: 14px;
   font-weight: 500;
-  padding: 6px 0;
+  color: var(--vp-c-brand);
-  margin: 0 13px 10px;
+}
-  border-bottom: 1px solid var(--vp-c-divider);
+
+.outline {
+  padding: 8px 0;
+  background-color: var(--vp-c-bg-soft);
 }
 
 .flyout-enter-active {

src/client/theme-default/styles/components/custom-block.css

@@ -84,10 +84,13 @@
 .custom-block a {
   color: inherit;
   font-weight: 600;
+  text-decoration: underline dotted;
+  text-underline-offset: 2px;
+  transition: opacity 0.25s;
 }
 
 .custom-block a:hover {
-  text-decoration: underline;
+  opacity: 0.75;
 }
 
 .custom-block code {

src/client/theme-default/styles/components/vp-doc.css

@@ -109,13 +109,11 @@
 .vp-doc a {
   font-weight: 500;
   color: var(--vp-c-brand);
-  text-decoration-style: dotted;
-  transition: color 0.25s;
 }
 
 .vp-doc a:hover {
-  /* color: var(--vp-c-brand-dark); */
+  text-decoration: underline dotted;
-  text-decoration: underline;
+  text-underline-offset: 2px;
 }
 
 .vp-doc strong {
@@ -219,10 +217,6 @@
   font-weight: 600;
 }
 
-.vp-doc .custom-block a:hover {
-  text-decoration: underline;
-}
-
 .vp-doc .custom-block code {
   font-size: var(--vp-custom-block-code-font-size);
   font-weight: 700;
@@ -271,11 +265,6 @@
 
 .vp-doc a > code {
   color: var(--vp-c-brand);
-  transition: color 0.25s;
-}
-
-.vp-doc a:hover > code {
-  color: var(--vp-c-brand-dark);
 }
 
 .vp-doc div[class*='language-'],

src/client/theme-default/styles/vars.css

@@ -9,7 +9,6 @@
 :root {
   --vp-c-white: #ffffff;
   --vp-c-black: #000000;
-
   --vp-c-gray: #8e8e93;
 
   --vp-c-text-light-1: rgba(60, 60, 67);
@@ -20,33 +19,6 @@
   --vp-c-text-dark-2: rgba(235, 235, 245, 0.6);
   --vp-c-text-dark-3: rgba(235, 235, 245, 0.38);
 
-  --vp-c-green: #10b981;
-  --vp-c-green-light: #34d399;
-  --vp-c-green-lighter: #6ee7b7;
-  --vp-c-green-dark: #059669;
-  --vp-c-green-darker: #047857;
-  --vp-c-green-dimm-1: rgba(16, 185, 129, 0.05);
-  --vp-c-green-dimm-2: rgba(16, 185, 129, 0.2);
-  --vp-c-green-dimm-3: rgba(16, 185, 129, 0.5);
-
-  --vp-c-yellow: #d97706;
-  --vp-c-yellow-light: #f59e0b;
-  --vp-c-yellow-lighter: #fbbf24;
-  --vp-c-yellow-dark: #b45309;
-  --vp-c-yellow-darker: #92400e;
-  --vp-c-yellow-dimm-1: rgba(234, 179, 8, 0.05);
-  --vp-c-yellow-dimm-2: rgba(234, 179, 8, 0.2);
-  --vp-c-yellow-dimm-3: rgba(234, 179, 8, 0.5);
-
-  --vp-c-red: #f43f5e;
-  --vp-c-red-light: #fb7185;
-  --vp-c-red-lighter: #fda4af;
-  --vp-c-red-dark: #e11d48;
-  --vp-c-red-darker: #be123c;
-  --vp-c-red-dimm-1: rgba(244, 63, 94, 0.05);
-  --vp-c-red-dimm-2: rgba(244, 63, 94, 0.2);
-  --vp-c-red-dimm-3: rgba(244, 63, 94, 0.5);
-
   --vp-c-sponsor: #db2777;
 }
 
@@ -69,9 +41,9 @@
 
   --vp-c-bg-alt: #f6f6f7;
 
-  --vp-c-border: rgba(60, 60, 67, 0.29);
+  --vp-c-border: #c2c2c4;
-  --vp-c-divider: rgba(60, 60, 67, 0.12);
+  --vp-c-divider: #e2e2e3;
-  --vp-c-gutter: rgba(60, 60, 67, 0.12);
+  --vp-c-gutter: #e2e2e3;
 
   --vp-c-neutral: var(--vp-c-black);
   --vp-c-neutral-inverse: var(--vp-c-white);
@@ -86,31 +58,67 @@
 
   --vp-c-text-code: #476582;
 
-  --vp-c-brand: var(--vp-c-green);
+  --vp-c-mute: #eeeef0;
-  --vp-c-brand-light: var(--vp-c-green-light);
+  --vp-c-mute-light: #f3f3f9;
-  --vp-c-brand-lighter: var(--vp-c-green-lighter);
+  --vp-c-mute-lighter: #f9f9fa;
-  --vp-c-brand-dark: var(--vp-c-green-dark);
-  --vp-c-brand-darker: var(--vp-c-green-darker);
-
-  --vp-c-mute: #f6f6f7;
-  --vp-c-mute-light: #f9f9fc;
-  --vp-c-mute-lighter: #ffffff;
   --vp-c-mute-dark: #e3e3e5;
   --vp-c-mute-darker: #d7d7d9;
+
+  --vp-c-brand: #4565d8;
+  --vp-c-brand-light: #708fff;
+  --vp-c-brand-lighter: #a4b2ff;
+  --vp-c-brand-lightest: #ecefff;
+  --vp-c-brand-dark: #4565d8;
+  --vp-c-brand-darker: #23459f;
+  --vp-c-brand-darkest: #132f59;
+  --vp-c-brand-dimm-1: rgba(112, 143, 255, 0.05);
+  --vp-c-brand-dimm-2: rgba(112, 143, 255, 0.2);
+  --vp-c-brand-dimm-3: rgba(112, 143, 255, 0.5);
+
+  --vp-c-green: #10b981;
+  --vp-c-green-light: #34d399;
+  --vp-c-green-lighter: #6ee7b7;
+  --vp-c-green-dark: #059669;
+  --vp-c-green-darker: #047857;
+  --vp-c-green-dimm-1: rgba(16, 185, 129, 0.05);
+  --vp-c-green-dimm-2: rgba(16, 185, 129, 0.2);
+  --vp-c-green-dimm-3: rgba(16, 185, 129, 0.5);
+
+  --vp-c-yellow: #d97706;
+  --vp-c-yellow-light: #f59e0b;
+  --vp-c-yellow-lighter: #fbbf24;
+  --vp-c-yellow-lightest: #fcd34d;
+  --vp-c-yellow-dark: #b45309;
+  --vp-c-yellow-darker: #92400e;
+  --vp-c-yellow-darkest: #6c3d08;
+  --vp-c-yellow-dimm-1: rgba(234, 179, 8, 0.05);
+  --vp-c-yellow-dimm-2: rgba(234, 179, 8, 0.2);
+  --vp-c-yellow-dimm-3: rgba(234, 179, 8, 0.5);
+
+  --vp-c-red: #f43f5e;
+  --vp-c-red-light: #fb7185;
+  --vp-c-red-lighter: #fda4af;
+  --vp-c-red-lightest: #fdd6e0;
+  --vp-c-red-dark: #e11d48;
+  --vp-c-red-darker: #be123c;
+  --vp-c-red-darkest: #9f1239;
+  --vp-c-red-dimm-1: rgba(244, 63, 94, 0.05);
+  --vp-c-red-dimm-2: rgba(244, 63, 94, 0.2);
+  --vp-c-red-dimm-3: rgba(244, 63, 94, 0.5);
 }
 
 .dark {
   --vp-c-bg: #1e1e20;
 
   --vp-c-bg-elv: #252529;
-  --vp-c-bg-elv-up: #313136;
+  --vp-c-bg-elv-up: #323238;
   --vp-c-bg-elv-down: #1e1e20;
-  --vp-c-bg-elv-mute: #313136;
+  --vp-c-bg-elv-mute: #323238;
 
   --vp-c-bg-soft: #252529;
-  --vp-c-bg-soft-up: #313136;
+  --vp-c-bg-soft-up: #323238;
   --vp-c-bg-soft-down: #1e1e20;
-  --vp-c-bg-soft-mute: #313136;
+  --vp-c-bg-soft-mute: #323238;
 
   --vp-c-bg-alt: #161618;
 
@@ -131,11 +139,55 @@
 
   --vp-c-text-code: #c9def1;
 
-  --vp-c-mute: #313136;
+  --vp-c-mute: #323238;
   --vp-c-mute-light: #3a3a3c;
   --vp-c-mute-lighter: #505053;
-  --vp-c-mute-dark: #2c2c30;
+  --vp-c-mute-dark: #222226;
-  --vp-c-mute-darker: #252529;
+  --vp-c-mute-darker: #505053;
+
+  --vp-c-brand: #708fff;
+  --vp-c-brand-light: #a4b2ff;
+  --vp-c-brand-lighter: #a4c8ff;
+  --vp-c-brand-lightest: #ecefff;
+  --vp-c-brand-dark: #4565d8;
+  --vp-c-brand-darker: #23459f;
+  --vp-c-brand-darkest: #132f59;
+  --vp-c-brand-dimm-1: rgba(112, 143, 255, 0.05);
+  --vp-c-brand-dimm-2: rgba(112, 143, 255, 0.2);
+  --vp-c-brand-dimm-3: rgba(112, 143, 255, 0.5);
+
+  --vp-c-green: #10b981;
+  --vp-c-green-light: #34d399;
+  --vp-c-green-lighter: #6ee7b7;
+  --vp-c-green-lightest: #a7f3d0;
+  --vp-c-green-dark: #059669;
+  --vp-c-green-darker: #047857;
+  --vp-c-green-darkest: #065f46;
+  --vp-c-green-dimm-1: rgba(16, 185, 129, 0.05);
+  --vp-c-green-dimm-2: rgba(16, 185, 129, 0.2);
+  --vp-c-green-dimm-3: rgba(16, 185, 129, 0.5);
+
+  --vp-c-yellow: #d1a336;
+  --vp-c-yellow-light: #f8e3a1;
+  --vp-c-yellow-lighter: #fff0c0;
+  --vp-c-yellow-lightest: #fff7dc;
+  --vp-c-yellow-dark: #b45309;
+  --vp-c-yellow-darker: #92400e;
+  --vp-c-yellow-darkest: #6c3d08;
+  --vp-c-yellow-dimm-1: rgba(234, 179, 8, 0.05);
+  --vp-c-yellow-dimm-2: rgba(234, 179, 8, 0.2);
+  --vp-c-yellow-dimm-3: rgba(234, 179, 8, 0.5);
+
+  --vp-c-red: #f43f5e;
+  --vp-c-red-light: #fb7185;
+  --vp-c-red-lighter: #fda4af;
+  --vp-c-red-lightest: #fdd6e0;
+  --vp-c-red-dark: #e11d48;
+  --vp-c-red-darker: #be123c;
+  --vp-c-red-darkest: #9f1239;
+  --vp-c-red-dimm-1: rgba(244, 63, 94, 0.05);
+  --vp-c-red-dimm-2: rgba(244, 63, 94, 0.2);
+  --vp-c-red-dimm-3: rgba(244, 63, 94, 0.5);
 }
 
 /**
@@ -211,7 +263,7 @@
   --vp-c-code-dimm: var(--vp-c-text-dark-3);
 
   --vp-code-block-color: var(--vp-c-text-dark-1);
-  --vp-code-block-bg: #292b30;
+  --vp-code-block-bg: #161618;
   --vp-code-block-bg-light: #1e1e20;
   --vp-code-block-divider-color: #000000;
 
@@ -271,15 +323,15 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-  --vp-button-brand-border: var(--vp-c-brand-lighter);
+  --vp-button-brand-border: var(--vp-c-brand);
   --vp-button-brand-text: var(--vp-c-white);
-  --vp-button-brand-bg: var(--vp-c-brand);
+  --vp-button-brand-bg: var(--vp-c-brand-dark);
-  --vp-button-brand-hover-border: var(--vp-c-brand-lighter);
+  --vp-button-brand-hover-border: var(--vp-c-brand-light);
   --vp-button-brand-hover-text: var(--vp-c-white);
-  --vp-button-brand-hover-bg: var(--vp-c-brand-dark);
+  --vp-button-brand-hover-bg: var(--vp-c-brand-darker);
-  --vp-button-brand-active-border: var(--vp-c-brand-lighter);
+  --vp-button-brand-active-border: var(--vp-c-brand-light);
   --vp-button-brand-active-text: var(--vp-c-white);
-  --vp-button-brand-active-bg: var(--vp-c-brand-darker);
+  --vp-button-brand-active-bg: var(--vp-c-brand-darkest);
 
   --vp-button-alt-border: var(--vp-c-border);
   --vp-button-alt-text: var(--vp-c-neutral);
@@ -317,23 +369,23 @@
 
   --vp-custom-block-info-border: var(--vp-c-border);
   --vp-custom-block-info-text: var(--vp-c-text-2);
-  --vp-custom-block-info-bg: var(--vp-c-bg-soft-up);
+  --vp-custom-block-info-bg: var(--vp-c-bg-soft);
-  --vp-custom-block-info-code-bg: var(--vp-c-bg-soft);
+  --vp-custom-block-info-code-bg: var(--vp-c-mute);
 
-  --vp-custom-block-tip-border: var(--vp-c-green);
+  --vp-custom-block-tip-border: var(--vp-c-brand);
-  --vp-custom-block-tip-text: var(--vp-c-green-dark);
+  --vp-custom-block-tip-text: var(--vp-c-brand);
-  --vp-custom-block-tip-bg: var(--vp-c-bg-soft-up);
+  --vp-custom-block-tip-bg: var(--vp-c-bg-soft);
-  --vp-custom-block-tip-code-bg: var(--vp-c-bg-soft);
+  --vp-custom-block-tip-code-bg: var(--vp-c-mute);
 
   --vp-custom-block-warning-border: var(--vp-c-yellow);
   --vp-custom-block-warning-text: var(--vp-c-yellow);
-  --vp-custom-block-warning-bg: var(--vp-c-bg-soft-up);
+  --vp-custom-block-warning-bg: var(--vp-c-bg-soft);
-  --vp-custom-block-warning-code-bg: var(--vp-c-bg-soft);
+  --vp-custom-block-warning-code-bg: var(--vp-c-mute);
 
   --vp-custom-block-danger-border: var(--vp-c-red);
   --vp-custom-block-danger-text: var(--vp-c-red);
-  --vp-custom-block-danger-bg: var(--vp-c-bg-soft-up);
+  --vp-custom-block-danger-bg: var(--vp-c-bg-soft);
-  --vp-custom-block-danger-code-bg: var(--vp-c-bg-soft);
+  --vp-custom-block-danger-code-bg: var(--vp-c-mute);
 
   --vp-custom-block-details-border: var(--vp-custom-block-info-border);
   --vp-custom-block-details-text: var(--vp-custom-block-info-text);
@@ -408,17 +460,17 @@
 :root {
   --vp-badge-info-border: var(--vp-c-border);
   --vp-badge-info-text: var(--vp-c-text-2);
-  --vp-badge-info-bg: var(--vp-c-bg-soft-up);
+  --vp-badge-info-bg: var(--vp-c-mute);
 
-  --vp-badge-tip-border: var(--vp-c-green-dark);
+  --vp-badge-tip-border: var(--vp-c-brand);
-  --vp-badge-tip-text: var(--vp-c-green);
+  --vp-badge-tip-text: var(--vp-c-brand);
-  --vp-badge-tip-bg: var(--vp-c-green-dimm-1);
+  --vp-badge-tip-bg: var(--vp-c-brand-dimm-1);
 
-  --vp-badge-warning-border: var(--vp-c-yellow-dark);
+  --vp-badge-warning-border: var(--vp-c-yellow);
   --vp-badge-warning-text: var(--vp-c-yellow);
   --vp-badge-warning-bg: var(--vp-c-yellow-dimm-1);
 
-  --vp-badge-danger-border: var(--vp-c-red-dark);
+  --vp-badge-danger-border: var(--vp-c-red);
   --vp-badge-danger-text: var(--vp-c-red);
   --vp-badge-danger-bg: var(--vp-c-red-dimm-1);
 }

types/default-theme.d.ts

@@ -183,8 +183,8 @@ export namespace DefaultTheme {
 
   export type ThemeableImage =
     | string
-    | { src: string; alt?: string }
+    | { src: string; alt?: string; [prop: string]: any }
-    | { light: string; dark: string; alt?: string }
+    | { light: string; dark: string; alt?: string; [prop: string]: any }
 
   export type FeatureIcon =
     | string