Skip to content

Commit

Permalink
fix(useDark): In Vue 2.6 mode.system is undefined (#3562)
Browse files Browse the repository at this point in the history
Co-authored-by: hguan <[email protected]>
Co-authored-by: Anthony Fu <[email protected]>
  • Loading branch information
3 people authored Dec 4, 2023
1 parent 07d3985 commit 686884a
Showing 1 changed file with 15 additions and 1 deletion.
16 changes: 15 additions & 1 deletion packages/core/useDark/index.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import { computed } from 'vue-demi'
import { defaultWindow } from '../_configurable'
import { usePreferredDark } from '../usePreferredDark'
import { useColorMode } from '../useColorMode'
import type { BasicColorSchema, UseColorModeOptions } from '../useColorMode'

Expand Down Expand Up @@ -36,6 +38,7 @@ export function useDark(options: UseDarkOptions = {}) {
const {
valueDark = 'dark',
valueLight = '',
window = defaultWindow,
} = options

const mode = useColorMode({
Expand All @@ -52,13 +55,24 @@ export function useDark(options: UseDarkOptions = {}) {
},
})

const system = computed(() => {
if (mode.system) {
return mode.system.value
}
else {
// In Vue 2.6, ref not be extensible, mode.system is undefined
const preferredDark = usePreferredDark({ window })
return preferredDark.value ? 'dark' : 'light'
}
})

const isDark = computed<boolean>({
get() {
return mode.value === 'dark'
},
set(v) {
const modeVal = v ? 'dark' : 'light'
if (mode.system.value === modeVal)
if (system.value === modeVal)
mode.value = 'auto'
else
mode.value = modeVal
Expand Down

0 comments on commit 686884a

Please sign in to comment.