diff --git a/src/dark-mode.ts b/src/dark-mode.ts index 4d0f977..524eb38 100644 --- a/src/dark-mode.ts +++ b/src/dark-mode.ts @@ -1,10 +1,23 @@ -import { useLocalStorage, useMutationObserver } from '@vueuse/core' +import { useDark, useLocalStorage, useMutationObserver } from '@vueuse/core' const setDarkMode = () => { setTimeout(() => { + const isDark = useDark({ valueDark: '' }) const vueuseColorScheme = useLocalStorage('vueuse-color-scheme', 'auto') - const colorMode = vueuseColorScheme.value === 'auto' ? 'dark' : '' const classList = Array.from(document.documentElement.classList) + let colorMode + if (vueuseColorScheme.value === 'auto') { + if (isDark.value) + colorMode = 'dark' + else + colorMode = '' + } + else if (vueuseColorScheme.value === 'dark') { + colorMode = 'dark' + } + else { + colorMode = '' + } if (classList.length && !classList.includes(colorMode)) { const classNames = colorMode === 'dark' ? 'htw-dark dark' : ''