110 lines
2.5 KiB
Vue
110 lines
2.5 KiB
Vue
<script lang="ts" setup>
|
|
import { ref, onMounted, watch } from 'vue'
|
|
import { useData } from '../composables/data'
|
|
import { APPEARANCE_KEY } from '../../shared'
|
|
import VPSwitch from './VPSwitch.vue'
|
|
import VPIconSun from './icons/VPIconSun.vue'
|
|
import VPIconMoon from './icons/VPIconMoon.vue'
|
|
|
|
const { site, isDark } = useData()
|
|
const checked = ref(false)
|
|
const toggle = typeof localStorage !== 'undefined' ? useAppearance() : () => {}
|
|
|
|
onMounted(() => {
|
|
checked.value = document.documentElement.classList.contains('dark')
|
|
})
|
|
|
|
function useAppearance() {
|
|
const query = window.matchMedia('(prefers-color-scheme: dark)')
|
|
const classList = document.documentElement.classList
|
|
|
|
let userPreference = localStorage.getItem(APPEARANCE_KEY)
|
|
|
|
let isDark =
|
|
(site.value.appearance === 'dark' && userPreference == null) ||
|
|
(userPreference === 'auto' || userPreference == null
|
|
? query.matches
|
|
: userPreference === 'dark')
|
|
|
|
query.onchange = (e) => {
|
|
if (userPreference === 'auto') {
|
|
setClass((isDark = e.matches))
|
|
}
|
|
}
|
|
|
|
function toggle() {
|
|
setClass((isDark = !isDark))
|
|
|
|
userPreference = isDark
|
|
? query.matches ? 'auto' : 'dark'
|
|
: query.matches ? 'light' : 'auto'
|
|
|
|
localStorage.setItem(APPEARANCE_KEY, userPreference)
|
|
}
|
|
|
|
function setClass(dark: boolean): void {
|
|
const css = document.createElement('style')
|
|
css.type = 'text/css'
|
|
css.appendChild(
|
|
document.createTextNode(
|
|
`:not(.VPSwitchAppearance):not(.VPSwitchAppearance *) {
|
|
-webkit-transition: none !important;
|
|
-moz-transition: none !important;
|
|
-o-transition: none !important;
|
|
-ms-transition: none !important;
|
|
transition: none !important;
|
|
}`
|
|
)
|
|
)
|
|
document.head.appendChild(css)
|
|
|
|
checked.value = dark
|
|
classList[dark ? 'add' : 'remove']('dark')
|
|
|
|
// @ts-expect-error keep unused declaration, used to force the browser to redraw
|
|
const _ = window.getComputedStyle(css).opacity
|
|
document.head.removeChild(css)
|
|
}
|
|
|
|
return toggle
|
|
}
|
|
|
|
watch(checked, (newIsDark) => {
|
|
isDark.value = newIsDark
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<VPSwitch
|
|
title="toggle dark mode"
|
|
class="VPSwitchAppearance"
|
|
:aria-checked="checked"
|
|
@click="toggle"
|
|
>
|
|
<VPIconSun class="sun" />
|
|
<VPIconMoon class="moon" />
|
|
</VPSwitch>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.sun {
|
|
opacity: 1;
|
|
}
|
|
|
|
.moon {
|
|
opacity: 0;
|
|
}
|
|
|
|
.dark .sun {
|
|
opacity: 0;
|
|
}
|
|
|
|
.dark .moon {
|
|
opacity: 1;
|
|
}
|
|
|
|
.dark .VPSwitchAppearance :deep(.check) {
|
|
/*rtl:ignore*/
|
|
transform: translateX(18px);
|
|
}
|
|
</style>
|