fix: Switching pages will flash
This commit is contained in:
parent
46ebf792c7
commit
dac9537475
1 changed files with 17 additions and 0 deletions
|
@ -1,10 +1,27 @@
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { useDark, useToggle } from '@vueuse/core'
|
import { useDark, useToggle } from '@vueuse/core'
|
||||||
|
import { onMounted, watchEffect } from 'vue'
|
||||||
|
|
||||||
const isDark = useDark()
|
const isDark = useDark()
|
||||||
|
|
||||||
const toggleDark = useToggle(isDark)
|
const toggleDark = useToggle(isDark)
|
||||||
|
|
||||||
|
watchEffect(() => {
|
||||||
|
if (isDark.value) {
|
||||||
|
setDarkMode(document)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
function setDarkMode(document: Document) {
|
||||||
|
if (isDark.value)
|
||||||
|
document.documentElement.classList.add('dark')
|
||||||
|
}
|
||||||
|
onMounted(() => {
|
||||||
|
document.addEventListener('astro:before-swap', (event) => {
|
||||||
|
setDarkMode(event.newDocument)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
function toggleTheme(event: MouseEvent) {
|
function toggleTheme(event: MouseEvent) {
|
||||||
const x = event.clientX
|
const x = event.clientX
|
||||||
const y = event.clientY
|
const y = event.clientY
|
||||||
|
|
Loading…
Reference in a new issue