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/components/VPDocFooter.vue b/src/client/theme-default/components/VPDocFooter.vue
index 0b6ff2a885d6..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">
+  <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 15791dd5af69..70dcb7fd5530 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': 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 577c8eceaded..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">
+  <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/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..b8cc6122c663
--- /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 }
+}
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/src/client/theme-default/styles/utils.css b/src/client/theme-default/styles/utils.css
index 65c7e55ec30b..4589622204d7 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;
+  }
+}
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.
      *