diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 3af3c594..0bbeef1b 100644
--- a/docs/.vitepress/config.ts
+++ b/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: {
diff --git a/docs/index.md b/docs/index.md
index b40a9e9b..3f60c11d 100644
--- a/docs/index.md
+++ b/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.
---
+
diff --git a/docs/public/vitepress-logo-large.webp b/docs/public/vitepress-logo-large.webp
new file mode 100644
index 00000000..2e47b155
Binary files /dev/null and b/docs/public/vitepress-logo-large.webp differ
diff --git a/docs/public/vitepress-logo-mini.svg b/docs/public/vitepress-logo-mini.svg
new file mode 100644
index 00000000..ed6438ad
--- /dev/null
+++ b/docs/public/vitepress-logo-mini.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/docs/public/vitepress-og.jpg b/docs/public/vitepress-og.jpg
new file mode 100644
index 00000000..aa8a0ea8
Binary files /dev/null and b/docs/public/vitepress-og.jpg differ
diff --git a/src/client/theme-default/components/VPBadge.vue b/src/client/theme-default/components/VPBadge.vue
index 5811e358..d87f4638 100644
--- a/src/client/theme-default/components/VPBadge.vue
+++ b/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;
- padding: 0 8px;
- line-height: 18px;
+ border-radius: 12px;
+ padding: 0 10px;
+ line-height: 22px;
font-size: 12px;
font-weight: 600;
transform: translateY(-2px);
}
-h1 .VPBadge,
-h2 .VPBadge,
-h3 .VPBadge,
-h4 .VPBadge,
-h5 .VPBadge,
-h6 .VPBadge {
- vertical-align: text-top;
+.vp-doc h1 > .VPBadge {
+ margin-top: 4px;
+ vertical-align: top;
}
-h2 .VPBadge {
- border-radius: 11px;
+.vp-doc h2 > .VPBadge {
+ 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 {
diff --git a/src/client/theme-default/components/VPDocOutlineDropdown.vue b/src/client/theme-default/components/VPDocOutlineDropdown.vue
index 5cd44a09..dc276055 100644
--- a/src/client/theme-default/components/VPDocOutlineDropdown.vue
+++ b/src/client/theme-default/components/VPDocOutlineDropdown.vue
@@ -36,7 +36,7 @@ onContentUpdated(() => {
diff --git a/src/client/theme-default/components/VPDocOutlineItem.vue b/src/client/theme-default/components/VPDocOutlineItem.vue
index 0f0110c9..4ba55b99 100644
--- a/src/client/theme-default/components/VPDocOutlineItem.vue
+++ b/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,
diff --git a/src/client/theme-default/components/VPLocalNavOutlineDropdown.vue b/src/client/theme-default/components/VPLocalNavOutlineDropdown.vue
index 7b278214..6012ff2d 100644
--- a/src/client/theme-default/components/VPLocalNavOutlineDropdown.vue
+++ b/src/client/theme-default/components/VPLocalNavOutlineDropdown.vue
@@ -58,10 +58,14 @@ function scrollToTop() {
class="items"
@click="onItemClick"
>
-
- {{ theme.returnToTopLabel || 'Return to top' }}
-
-
+
+
+
+
@@ -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);
- padding: 4px 10px 16px;
- border: 1px solid var(--vp-c-divider);
+ right: 16px;
+ left: 16px;
+ 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);
- font-size: 13px;
+ padding: 0 16px;
+ line-height: 48px;
+ font-size: 14px;
font-weight: 500;
- padding: 6px 0;
- margin: 0 13px 10px;
- border-bottom: 1px solid var(--vp-c-divider);
+ color: var(--vp-c-brand);
+}
+
+.outline {
+ padding: 8px 0;
+ background-color: var(--vp-c-bg-soft);
}
.flyout-enter-active {
diff --git a/src/client/theme-default/styles/components/custom-block.css b/src/client/theme-default/styles/components/custom-block.css
index 373b3a3a..11621429 100644
--- a/src/client/theme-default/styles/components/custom-block.css
+++ b/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 {
diff --git a/src/client/theme-default/styles/components/vp-doc.css b/src/client/theme-default/styles/components/vp-doc.css
index 23bc6852..12c5bf2d 100644
--- a/src/client/theme-default/styles/components/vp-doc.css
+++ b/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;
+ text-decoration: underline dotted;
+ 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-'],
diff --git a/src/client/theme-default/styles/vars.css b/src/client/theme-default/styles/vars.css
index f1c0e1c6..138f5d4a 100644
--- a/src/client/theme-default/styles/vars.css
+++ b/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-divider: rgba(60, 60, 67, 0.12);
- --vp-c-gutter: rgba(60, 60, 67, 0.12);
+ --vp-c-border: #c2c2c4;
+ --vp-c-divider: #e2e2e3;
+ --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-brand-light: var(--vp-c-green-light);
- --vp-c-brand-lighter: var(--vp-c-green-lighter);
- --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: #eeeef0;
+ --vp-c-mute-light: #f3f3f9;
+ --vp-c-mute-lighter: #f9f9fa;
--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-darker: #252529;
+ --vp-c-mute-dark: #222226;
+ --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-hover-border: var(--vp-c-brand-lighter);
+ --vp-button-brand-bg: var(--vp-c-brand-dark);
+ --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-active-border: var(--vp-c-brand-lighter);
+ --vp-button-brand-hover-bg: var(--vp-c-brand-darker);
+ --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-code-bg: var(--vp-c-bg-soft);
+ --vp-custom-block-info-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-text: var(--vp-c-green-dark);
- --vp-custom-block-tip-bg: var(--vp-c-bg-soft-up);
- --vp-custom-block-tip-code-bg: var(--vp-c-bg-soft);
+ --vp-custom-block-tip-border: var(--vp-c-brand);
+ --vp-custom-block-tip-text: var(--vp-c-brand);
+ --vp-custom-block-tip-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-code-bg: var(--vp-c-bg-soft);
+ --vp-custom-block-warning-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-code-bg: var(--vp-c-bg-soft);
+ --vp-custom-block-danger-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-text: var(--vp-c-green);
- --vp-badge-tip-bg: var(--vp-c-green-dimm-1);
+ --vp-badge-tip-border: var(--vp-c-brand);
+ --vp-badge-tip-text: var(--vp-c-brand);
+ --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);
}
diff --git a/types/default-theme.d.ts b/types/default-theme.d.ts
index c67cf74d..aa9ab6f3 100644
--- a/types/default-theme.d.ts
+++ b/types/default-theme.d.ts
@@ -183,8 +183,8 @@ export namespace DefaultTheme {
export type ThemeableImage =
| string
- | { src: string; alt?: string }
- | { light: string; dark: string; alt?: string }
+ | { src: string; alt?: string; [prop: string]: any }
+ | { light: string; dark: string; alt?: string; [prop: string]: any }
export type FeatureIcon =
| string