50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
|
import { isClient, useLocalStorage, usePreferredDark, useToggle } from '@vueuse/core'
|
||
|
|
import { computed, watch } from 'vue'
|
||
|
|
import { configs } from '../env'
|
||
|
|
|
||
|
|
const preferredDark = usePreferredDark()
|
||
|
|
const store = useLocalStorage('slidev-color-schema', 'auto')
|
||
|
|
|
||
|
|
export const isColorSchemaConfigured = computed(() => configs.colorSchema !== 'auto')
|
||
|
|
export const isDark = computed<boolean>({
|
||
|
|
get() {
|
||
|
|
if (isColorSchemaConfigured.value)
|
||
|
|
return configs.colorSchema === 'dark'
|
||
|
|
return store.value === 'auto'
|
||
|
|
? preferredDark.value
|
||
|
|
: store.value === 'dark'
|
||
|
|
},
|
||
|
|
set(v) {
|
||
|
|
if (isColorSchemaConfigured.value)
|
||
|
|
return
|
||
|
|
store.value = v === preferredDark.value
|
||
|
|
? 'auto'
|
||
|
|
: v ? 'dark' : 'light'
|
||
|
|
},
|
||
|
|
})
|
||
|
|
|
||
|
|
export const toggleDark = useToggle(isDark)
|
||
|
|
|
||
|
|
if (isClient) {
|
||
|
|
const CSS_DISABLE_TRANS = '*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}'
|
||
|
|
|
||
|
|
watch(
|
||
|
|
isDark,
|
||
|
|
(v) => {
|
||
|
|
const style = window!.document.createElement('style')
|
||
|
|
style.appendChild(document.createTextNode(CSS_DISABLE_TRANS))
|
||
|
|
window!.document.head.appendChild(style)
|
||
|
|
|
||
|
|
const html = document.querySelector('html')!
|
||
|
|
html.classList.toggle('dark', v)
|
||
|
|
html.classList.toggle('light', !v)
|
||
|
|
|
||
|
|
// Calling getComputedStyle forces the browser to redraw
|
||
|
|
// @ts-expect-error unused variable
|
||
|
|
const _ = window!.getComputedStyle(style!).opacity
|
||
|
|
document.head.removeChild(style!)
|
||
|
|
},
|
||
|
|
{ immediate: true },
|
||
|
|
)
|
||
|
|
}
|