|
@@ -1,75 +0,0 @@
|
|
|
-import {ref, onBeforeMount, onBeforeUnmount, getCurrentInstance} from 'vue'
|
|
|
-
|
|
|
-let usedCount = 0, darks, lights, managable = true
|
|
|
-
|
|
|
-const osTheme = ref(null)
|
|
|
-const supportMatchMedia = typeof window !== 'undefined' && window.matchMedia !== undefined
|
|
|
-
|
|
|
-//获取系统主题
|
|
|
-export const useOsTheme = () => {
|
|
|
- if (process.env.NODE_ENV !== 'test' && !supportMatchMedia) {
|
|
|
- return osTheme.value
|
|
|
- }
|
|
|
- if (process.env.NODE_ENV === 'test' && window.matchMedia === undefined) {
|
|
|
- return osTheme.value
|
|
|
- }
|
|
|
- if (usedCount === 0) init()
|
|
|
- if (managable && (managable = hasInstance())) {
|
|
|
- onBeforeMount(() => {
|
|
|
- usedCount += 1
|
|
|
- })
|
|
|
- onBeforeUnmount(() => {
|
|
|
- usedCount -= 1
|
|
|
- if (usedCount === 0) clean()
|
|
|
- })
|
|
|
- }
|
|
|
- return osTheme.value
|
|
|
-}
|
|
|
-
|
|
|
-const handleDarkMqlChange = (e) => {
|
|
|
- if (e.matches) {
|
|
|
- osTheme.value = 'dark'
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-const handleLightMqlChange = (e) => {
|
|
|
- if (e.matches) {
|
|
|
- osTheme.value = 'light'
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-const init = () => {
|
|
|
- darks = window.matchMedia('(prefers-color-scheme: dark)')
|
|
|
- lights = window.matchMedia('(prefers-color-scheme: light)')
|
|
|
- if (darks.matches) {
|
|
|
- osTheme.value = 'dark'
|
|
|
- } else if (lights.matches) {
|
|
|
- osTheme.value = 'light'
|
|
|
- } else {
|
|
|
- osTheme.value = null
|
|
|
- }
|
|
|
- if (darks.addEventListener) {
|
|
|
- darks.addEventListener('change', handleDarkMqlChange)
|
|
|
- lights.addEventListener('change', handleLightMqlChange)
|
|
|
- } else if (darks.addListener) {
|
|
|
- darks.addListener(handleDarkMqlChange)
|
|
|
- lights.addListener(handleLightMqlChange)
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-const clean = () => {
|
|
|
- if ('removeEventListener' in darks) {
|
|
|
- darks.removeEventListener('change', handleDarkMqlChange)
|
|
|
- lights?.removeEventListener('change', handleLightMqlChange)
|
|
|
- } else if ('removeListener' in darks) {
|
|
|
- darks?.removeListener(handleDarkMqlChange)
|
|
|
- lights?.removeListener(handleLightMqlChange)
|
|
|
- }
|
|
|
-
|
|
|
- darks = undefined
|
|
|
- lights = undefined
|
|
|
-}
|
|
|
-
|
|
|
-export const hasInstance = () => {
|
|
|
- return getCurrentInstance() !== null
|
|
|
-}
|