hac/src/plugins/useOsTheme.js

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
}