-
-
Notifications
You must be signed in to change notification settings - Fork 2.4k
/
index.ts
69 lines (62 loc) · 1.57 KB
/
index.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
import { computed } from 'vue-demi'
import { useColorMode } from '../useColorMode'
import type { BasicColorSchema, UseColorModeOptions } from '../useColorMode'
export interface UseDarkOptions extends Omit<UseColorModeOptions<BasicColorSchema>, 'modes' | 'onChanged'> {
/**
* Value applying to the target element when isDark=true
*
* @default 'dark'
*/
valueDark?: string
/**
* Value applying to the target element when isDark=false
*
* @default ''
*/
valueLight?: string
/**
* A custom handler for handle the updates.
* When specified, the default behavior will be overridden.
*
* @default undefined
*/
onChanged?: (isDark: boolean, defaultHandler: ((mode: BasicColorSchema) => void), mode: BasicColorSchema) => void
}
/**
* Reactive dark mode with auto data persistence.
*
* @see https://vueuse.org/useDark
* @param options
*/
export function useDark(options: UseDarkOptions = {}) {
const {
valueDark = 'dark',
valueLight = '',
} = options
const mode = useColorMode({
...options,
onChanged: (mode, defaultHandler) => {
if (options.onChanged)
options.onChanged?.(mode === 'dark', defaultHandler, mode)
else
defaultHandler(mode)
},
modes: {
dark: valueDark,
light: valueLight,
},
})
const isDark = computed<boolean>({
get() {
return mode.value === 'dark'
},
set(v) {
const modeVal = v ? 'dark' : 'light'
if (mode.system.value === modeVal)
mode.value = 'auto'
else
mode.value = modeVal
},
})
return isDark
}