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] 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 aa12cf3e..830f8793 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 2dd06281..2a72f7f0 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 00000000..b96f71a8
--- /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