55 lines
1.4 KiB
TypeScript
55 lines
1.4 KiB
TypeScript
import { Capacitor } from '@capacitor/core'
|
|
import { StatusBar, Style } from '@capacitor/status-bar'
|
|
import { ionDarkClass } from '~/constants'
|
|
|
|
/**
|
|
* 手动切换暗色时，浏览器状态栏颜色跟随应用而不是系统
|
|
*/
|
|
function syncThemeColor(color: string) {
|
|
document.querySelectorAll<HTMLMetaElement>('meta[name="theme-color"]').forEach(meta => (meta.content = color))
|
|
}
|
|
|
|
export const useDarkMode = createSharedComposable(() => {
|
|
const color = useColorMode()
|
|
const isDark = computed(() => color.value === 'dark')
|
|
|
|
async function setLightMode() {
|
|
document.documentElement.classList.remove(ionDarkClass)
|
|
syncThemeColor('#f2f2f6')
|
|
|
|
if (Capacitor.isNativePlatform()) {
|
|
await StatusBar.setStyle({ style: Style.Light })
|
|
await StatusBar.setBackgroundColor({ color: '#f2f2f6ff' })
|
|
}
|
|
}
|
|
|
|
async function setDarkMode() {
|
|
document.documentElement.classList.add(ionDarkClass)
|
|
syncThemeColor('#000000')
|
|
|
|
if (Capacitor.isNativePlatform()) {
|
|
await StatusBar.setStyle({ style: Style.Dark })
|
|
await StatusBar.setBackgroundColor({ color: '#ff000000' })
|
|
}
|
|
}
|
|
|
|
return {
|
|
color,
|
|
isDark,
|
|
setLightMode,
|
|
setDarkMode,
|
|
|
|
async toggleDark() {
|
|
const targetMode = color.value === 'dark' ? 'light' : 'dark'
|
|
color.preference = targetMode
|
|
|
|
if (targetMode === 'dark') {
|
|
setDarkMode()
|
|
}
|
|
else {
|
|
setLightMode()
|
|
}
|
|
},
|
|
}
|
|
})
|