41 lines
996 B
TypeScript
41 lines
996 B
TypeScript
import { StatusBar, Style } from '@capacitor/status-bar'
|
|
import { ionDarkClass } from '~/constants'
|
|
|
|
export const useDarkMode = createSharedComposable(() => {
|
|
const color = useColorMode()
|
|
const isDark = computed(() => color.value === 'dark')
|
|
|
|
async function setLightMode() {
|
|
document.documentElement.classList.remove(ionDarkClass)
|
|
|
|
await StatusBar.setStyle({ style: Style.Light })
|
|
await StatusBar.setBackgroundColor({ color: '#f2f2f6ff' })
|
|
}
|
|
|
|
async function setDarkMode() {
|
|
document.documentElement.classList.add(ionDarkClass)
|
|
|
|
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()
|
|
}
|
|
},
|
|
}
|
|
})
|