From 8d285eb9480281c630a11449aa42e66c034bf7b0 Mon Sep 17 00:00:00 2001
From: Ethan Goh <7086cmd@gmail.com>
Date: Sun, 14 Jul 2024 14:59:29 +0800
Subject: [PATCH 1/5] feat: remove navs and footers in printing

---
 src/client/theme-default/components/VPDocFooter.vue | 2 +-
 src/client/theme-default/components/VPLocalNav.vue  | 1 +
 src/client/theme-default/components/VPNav.vue       | 2 +-
 src/client/theme-default/styles/utils.css           | 6 ++++++
 4 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/client/theme-default/components/VPDocFooter.vue b/src/client/theme-default/components/VPDocFooter.vue
index 0b6ff2a885d6..1514dbe0f564 100644
--- a/src/client/theme-default/components/VPDocFooter.vue
+++ b/src/client/theme-default/components/VPDocFooter.vue
@@ -25,7 +25,7 @@ const showFooter = computed(
 </script>
 
 <template>
-  <footer v-if="showFooter" class="VPDocFooter">
+  <footer v-if="showFooter" class="VPDocFooter hidden-print">
     <slot name="doc-footer-before" />
 
     <div v-if="hasEditLink || hasLastUpdated" class="edit-info">
diff --git a/src/client/theme-default/components/VPLocalNav.vue b/src/client/theme-default/components/VPLocalNav.vue
index 15791dd5af69..fa16ec5a8e02 100644
--- a/src/client/theme-default/components/VPLocalNav.vue
+++ b/src/client/theme-default/components/VPLocalNav.vue
@@ -46,6 +46,7 @@ const emptyAndNoSidebar = computed(() => {
 const classes = computed(() => {
   return {
     VPLocalNav: true,
+    'hidden-print': true,
     'has-sidebar': hasSidebar.value,
     empty: empty.value,
     fixed: emptyAndNoSidebar.value
diff --git a/src/client/theme-default/components/VPNav.vue b/src/client/theme-default/components/VPNav.vue
index 577c8eceaded..856701103719 100644
--- a/src/client/theme-default/components/VPNav.vue
+++ b/src/client/theme-default/components/VPNav.vue
@@ -23,7 +23,7 @@ watchEffect(() => {
 </script>
 
 <template>
-  <header v-if="hasNavbar" class="VPNav">
+  <header v-if="hasNavbar" class="VPNav hidden-print">
     <VPNavBar :is-screen-open="isScreenOpen" @toggle-screen="toggleScreen">
       <template #nav-bar-title-before><slot name="nav-bar-title-before" /></template>
       <template #nav-bar-title-after><slot name="nav-bar-title-after" /></template>
diff --git a/src/client/theme-default/styles/utils.css b/src/client/theme-default/styles/utils.css
index 65c7e55ec30b..a6b3a62f4d89 100644
--- a/src/client/theme-default/styles/utils.css
+++ b/src/client/theme-default/styles/utils.css
@@ -7,3 +7,9 @@
   clip-path: inset(50%);
   overflow: hidden;
 }
+
+@media print {
+  .hidden-print {
+    display: none !important;
+  }
+}
\ No newline at end of file

From 5ccd4636f7aae2b030311520ab5d88a75b7f6310 Mon Sep 17 00:00:00 2001
From: Ethan Goh <7086cmd@gmail.com>
Date: Sun, 14 Jul 2024 20:25:35 +0800
Subject: [PATCH 2/5] feat: switch to light mode when print triggered.

---
 package.json                                  |  2 +-
 .../components/VPSwitchAppearance.vue         | 10 ++---
 src/client/theme-default/composables/dark.ts  | 38 +++++++++++++++++++
 3 files changed, 43 insertions(+), 7 deletions(-)
 create mode 100644 src/client/theme-default/composables/dark.ts

diff --git a/package.json b/package.json
index aa12cf3e3b20..830f8793acca 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vitepress",
-  "version": "1.3.0",
+  "version": "1.3.0-patch.4",
   "description": "Vite & Vue powered static site generator",
   "keywords": [
     "vite",
diff --git a/src/client/theme-default/components/VPSwitchAppearance.vue b/src/client/theme-default/components/VPSwitchAppearance.vue
index 2dd062816b95..2a72f7f00817 100644
--- a/src/client/theme-default/components/VPSwitchAppearance.vue
+++ b/src/client/theme-default/components/VPSwitchAppearance.vue
@@ -1,13 +1,11 @@
 <script lang="ts" setup>
-import { inject, ref, watchPostEffect } from 'vue'
+import { ref, watchPostEffect } from 'vue'
 import { useData } from '../composables/data'
 import VPSwitch from './VPSwitch.vue'
+import { useDark } from '../composables/dark'
 
-const { isDark, theme } = useData()
-
-const toggleAppearance = inject('toggle-appearance', () => {
-  isDark.value = !isDark.value
-})
+const { theme } = useData()
+const { isDark, toggleAppearance } = useDark({ triggerPrint: true });
 
 const switchTitle = ref('')
 
diff --git a/src/client/theme-default/composables/dark.ts b/src/client/theme-default/composables/dark.ts
new file mode 100644
index 000000000000..b96f71a85490
--- /dev/null
+++ b/src/client/theme-default/composables/dark.ts
@@ -0,0 +1,38 @@
+import { inject, type Ref } from 'vue'
+import { useData } from './data'
+import { onMounted } from 'vue'
+
+export interface UseDarkOptions {
+  triggerPrint: boolean
+}
+
+export interface UseDark {
+  isDark: Ref<boolean>
+  toggleAppearance: () => void
+}
+
+export function useDark(options?: UseDarkOptions): UseDark {
+  const { isDark } = useData()
+  const toggleAppearance = inject('toggle-appearance', () => {
+    isDark.value = !isDark.value
+  })
+  let previousPreferred = isDark.value
+  let isPrinting = false
+
+  // FIXME it will remain light when preferring dark mode after printing.
+  if (options?.triggerPrint) {
+    onMounted(() => {
+      window.addEventListener('beforeprint', () => {
+        if (isPrinting) return
+        isPrinting = true
+        previousPreferred = isDark.value
+        isDark.value = false
+      })
+      window.addEventListener('afterprint', () => {
+        isPrinting = false
+        isDark.value = previousPreferred
+      })
+    })
+  }
+  return { isDark, toggleAppearance }
+}
\ No newline at end of file

From 6f8bd722bc640b18a719702a6e7e154330d918d1 Mon Sep 17 00:00:00 2001
From: Ethan Goh <7086cmd@gmail.com>
Date: Sun, 14 Jul 2024 20:42:45 +0800
Subject: [PATCH 3/5] feat: add an option for removing extra when printing

---
 src/client/theme-default/components/VPDocFooter.vue |  9 ++++++++-
 src/client/theme-default/components/VPLocalNav.vue  |  2 +-
 src/client/theme-default/components/VPNav.vue       | 11 +++++++++--
 src/client/theme-default/styles/base.css            |  3 +++
 types/default-theme.d.ts                            |  9 +++++++++
 5 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/src/client/theme-default/components/VPDocFooter.vue b/src/client/theme-default/components/VPDocFooter.vue
index 1514dbe0f564..5671de77ffbf 100644
--- a/src/client/theme-default/components/VPDocFooter.vue
+++ b/src/client/theme-default/components/VPDocFooter.vue
@@ -22,10 +22,17 @@ const showFooter = computed(
     control.value.prev ||
     control.value.next
 )
+
+const classes = computed(() => {
+  return {
+    VPDocFooter: true,
+    'hidden-print': theme.value.removeExtraElementsInPrint
+  }
+})
 </script>
 
 <template>
-  <footer v-if="showFooter" class="VPDocFooter hidden-print">
+  <footer v-if="showFooter" :class="classes">
     <slot name="doc-footer-before" />
 
     <div v-if="hasEditLink || hasLastUpdated" class="edit-info">
diff --git a/src/client/theme-default/components/VPLocalNav.vue b/src/client/theme-default/components/VPLocalNav.vue
index fa16ec5a8e02..70dcb7fd5530 100644
--- a/src/client/theme-default/components/VPLocalNav.vue
+++ b/src/client/theme-default/components/VPLocalNav.vue
@@ -46,7 +46,7 @@ const emptyAndNoSidebar = computed(() => {
 const classes = computed(() => {
   return {
     VPLocalNav: true,
-    'hidden-print': true,
+    'hidden-print': theme.value.removeExtraElementsInPrint,
     'has-sidebar': hasSidebar.value,
     empty: empty.value,
     fixed: emptyAndNoSidebar.value
diff --git a/src/client/theme-default/components/VPNav.vue b/src/client/theme-default/components/VPNav.vue
index 856701103719..d9ae843094f3 100644
--- a/src/client/theme-default/components/VPNav.vue
+++ b/src/client/theme-default/components/VPNav.vue
@@ -7,7 +7,7 @@ import VPNavBar from './VPNavBar.vue'
 import VPNavScreen from './VPNavScreen.vue'
 
 const { isScreenOpen, closeScreen, toggleScreen } = useNav()
-const { frontmatter } = useData()
+const { frontmatter, theme } = useData()
 
 const hasNavbar = computed(() => {
   return frontmatter.value.navbar !== false
@@ -20,10 +20,17 @@ watchEffect(() => {
     document.documentElement.classList.toggle('hide-nav', !hasNavbar.value)
   }
 })
+
+const classes = computed(() => {
+  return {
+    VPNav: true,
+    'hidden-print': theme.value.removeExtraElementsInPrint
+  }
+})
 </script>
 
 <template>
-  <header v-if="hasNavbar" class="VPNav hidden-print">
+  <header v-if="hasNavbar" :class="classes">
     <VPNavBar :is-screen-open="isScreenOpen" @toggle-screen="toggleScreen">
       <template #nav-bar-title-before><slot name="nav-bar-title-before" /></template>
       <template #nav-bar-title-after><slot name="nav-bar-title-after" /></template>
diff --git a/src/client/theme-default/styles/base.css b/src/client/theme-default/styles/base.css
index 8041b6bc37a2..be3d06c66f4d 100644
--- a/src/client/theme-default/styles/base.css
+++ b/src/client/theme-default/styles/base.css
@@ -43,6 +43,9 @@ body {
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  page-break-inside: avoid;
+  page-break-after: avoid;
+  page-break-before: avoid;
 }
 
 main {
diff --git a/types/default-theme.d.ts b/types/default-theme.d.ts
index 37be5babd03c..92b165b100db 100644
--- a/types/default-theme.d.ts
+++ b/types/default-theme.d.ts
@@ -119,6 +119,15 @@ export namespace DefaultTheme {
      */
     returnToTopLabel?: string
 
+    /**
+     * @default false
+     *
+     * Remove extraneous elements when printing, such as
+     * the sidebar, navbar, and footer. It can clean print pages, and focus on
+     * the main content.
+     */
+    removeExtraElementsInPrint?: boolean
+
     /**
      * Set custom `aria-label` for language menu button.
      *

From af23bb59ba598c51e1cb18c61539dfb099237819 Mon Sep 17 00:00:00 2001
From: Ethan Goh <7086cmd@gmail.com>
Date: Fri, 19 Jul 2024 17:00:36 +0800
Subject: [PATCH 4/5] feat(docs): add `removeExtraElementsInPrint` in English
 and Chinese document.

---
 docs/en/reference/default-theme-config.md    |  7 +++++++
 docs/zh/reference/default-theme-config.md    | 20 ++++++++++++++++----
 src/client/theme-default/composables/dark.ts |  2 +-
 src/client/theme-default/styles/utils.css    |  2 +-
 src/node/config.ts                           |  2 +-
 5 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/docs/en/reference/default-theme-config.md b/docs/en/reference/default-theme-config.md
index 4a43153893cd..f70c5e697083 100644
--- a/docs/en/reference/default-theme-config.md
+++ b/docs/en/reference/default-theme-config.md
@@ -436,6 +436,13 @@ Can be used to customize the light mode switch title that appears on hovering.
 
 Can be used to customize the dark mode switch title that appears on hovering.
 
+## removeExtraElementsInPrint
+
+- Type: `boolean`
+- Default: `false`
+
+When set to `true`, it will remove extra elements like the sidebar, navbar, and footer when printing the page. If you want to print your docs and don't want to include the extra elements, you can set this option to `true`.
+
 ## sidebarMenuLabel
 
 - Type: `string`
diff --git a/docs/zh/reference/default-theme-config.md b/docs/zh/reference/default-theme-config.md
index a7028f1694b8..657bea9dbc78 100644
--- a/docs/zh/reference/default-theme-config.md
+++ b/docs/zh/reference/default-theme-config.md
@@ -23,7 +23,8 @@ export default {
 
 - 类型：`boolean`
 
-将本地语言更改为 `zh` 会将 URL 从 `/foo`（或 `/en/foo/`）更改为 `/zh/foo`。可以通过将 `themeConfig.i18nRouting` 设置为 `false` 来禁用此行为。
+将本地语言更改为 `zh` 会将 URL 从 `/foo`（或 `/en/foo/`）更改为 `/zh/foo`。可以通过将 `themeConfig.i18nRouting`
+设置为 `false` 来禁用此行为。
 
 ## logo
 
@@ -50,7 +51,8 @@ type ThemeableImage =
 
 - 类型：`string | false`
 
-可以自定义此项以替换导航中的默认站点标题 (应用配置中的 `title`)。当设置为 `false` 时，导航中的标题将被禁用。这在当 `logo` 已经包含站点标题文本时很有用。
+可以自定义此项以替换导航中的默认站点标题 (应用配置中的 `title`)。当设置为 `false` 时，导航中的标题将被禁用。这在当 `logo`
+已经包含站点标题文本时很有用。
 
 ```ts
 export default {
@@ -283,7 +285,8 @@ export interface Footer {
 - 类型：`EditLink`
 - 每个页面可以通过 [frontmatter](./frontmatter-config#editlink) 覆盖
 
-编辑链接可让显示链接以编辑 Git 管理服务 (例如 GitHub 或 GitLab) 上的页面。有关详细信息，请参阅[默认主题：编辑链接](./default-theme-edit-link)。
+编辑链接可让显示链接以编辑 Git 管理服务 (例如 GitHub 或 GitLab)
+上的页面。有关详细信息，请参阅[默认主题：编辑链接](./default-theme-edit-link)。
 
 ```ts
 export default {
@@ -342,7 +345,8 @@ export interface LastUpdatedOptions {
 
 - 类型：`AlgoliaSearch`
 
-支持使用 [Algolia DocSearch](https://docsearch.algolia.com/docs/what-is-docsearch) 搜索站点文档。在[默认主题：搜索](./default-theme-search) 中了解更多信息。
+支持使用 [Algolia DocSearch](https://docsearch.algolia.com/docs/what-is-docsearch)
+搜索站点文档。在[默认主题：搜索](./default-theme-search) 中了解更多信息。
 
 ```ts
 export interface AlgoliaSearchOptions extends DocSearchProps {
@@ -423,6 +427,14 @@ export interface DocFooter {
 
 用于自定义悬停时显示的深色模式开关标题。
 
+## removeExtraElementsInPrint
+
+- 类型：`boolean`
+- 默认值：`false`
+
+删除打印页面中的额外元素。当设置为 `true`
+时，打印页面时会删除侧边栏、导航栏和页脚等额外元素。如果要打印文档且并不想包含额外元素，可以将此选项设置为 `true`。
+
 ## sidebarMenuLabel
 
 - 类型：`string`
diff --git a/src/client/theme-default/composables/dark.ts b/src/client/theme-default/composables/dark.ts
index b96f71a85490..b8cc6122c663 100644
--- a/src/client/theme-default/composables/dark.ts
+++ b/src/client/theme-default/composables/dark.ts
@@ -35,4 +35,4 @@ export function useDark(options?: UseDarkOptions): UseDark {
     })
   }
   return { isDark, toggleAppearance }
-}
\ No newline at end of file
+}
diff --git a/src/client/theme-default/styles/utils.css b/src/client/theme-default/styles/utils.css
index a6b3a62f4d89..4589622204d7 100644
--- a/src/client/theme-default/styles/utils.css
+++ b/src/client/theme-default/styles/utils.css
@@ -12,4 +12,4 @@
   .hidden-print {
     display: none !important;
   }
-}
\ No newline at end of file
+}
diff --git a/src/node/config.ts b/src/node/config.ts
index 9f34ab43646b..0ecf42d7867e 100644
--- a/src/node/config.ts
+++ b/src/node/config.ts
@@ -270,7 +270,7 @@ function resolveSiteDataHead(userConfig?: UserConfig): HeadConfig[] {
       typeof userConfig?.appearance === 'string'
         ? userConfig?.appearance
         : typeof userConfig?.appearance === 'object'
-          ? (userConfig.appearance.initialValue ?? 'auto')
+          ? userConfig.appearance.initialValue ?? 'auto'
           : 'auto'
 
     head.push([

From 12d609b049af210823995fb541551748a3e5e5f1 Mon Sep 17 00:00:00 2001
From: Ethan Goh <7086cmd@gmail.com>
Date: Sat, 20 Jul 2024 07:19:59 +0800
Subject: [PATCH 5/5] chore: format

---
 src/node/config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/node/config.ts b/src/node/config.ts
index 0ecf42d7867e..9f34ab43646b 100644
--- a/src/node/config.ts
+++ b/src/node/config.ts
@@ -270,7 +270,7 @@ function resolveSiteDataHead(userConfig?: UserConfig): HeadConfig[] {
       typeof userConfig?.appearance === 'string'
         ? userConfig?.appearance
         : typeof userConfig?.appearance === 'object'
-          ? userConfig.appearance.initialValue ?? 'auto'
+          ? (userConfig.appearance.initialValue ?? 'auto')
           : 'auto'
 
     head.push([