feat: switch to light mode when print triggered.

pull/4041/head
Ethan Goh 1 year ago
parent 8d285eb948
commit 5ccd4636f7

@ -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",

@ -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('')

@ -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 }
}
Loading…
Cancel
Save