64 lines
1.9 KiB
JavaScript
64 lines
1.9 KiB
JavaScript
import { storeToRefs } from 'pinia'
|
||
import { useTheme } from 'vuetify'
|
||
import { cookieRef, useLayoutConfigStore } from '@layouts/stores/config'
|
||
import { themeConfig } from '@themeConfig'
|
||
|
||
// SECTION Store
|
||
export const useConfigStore = defineStore('config', () => {
|
||
// 👉 Theme
|
||
const userPreferredColorScheme = usePreferredColorScheme()
|
||
const cookieColorScheme = cookieRef('color-scheme', 'light')
|
||
|
||
watch(userPreferredColorScheme, val => {
|
||
if (val !== 'no-preference')
|
||
cookieColorScheme.value = val
|
||
}, { immediate: true })
|
||
|
||
const theme = cookieRef('theme', themeConfig.app.theme)
|
||
|
||
// 👉 isVerticalNavSemiDark
|
||
const isVerticalNavSemiDark = cookieRef('isVerticalNavSemiDark', themeConfig.verticalNav.isVerticalNavSemiDark)
|
||
|
||
// 👉 isVerticalNavSemiDark
|
||
const skin = cookieRef('skin', themeConfig.app.skin)
|
||
|
||
// ℹ️ We need to use `storeToRefs` to forward the state
|
||
const { isLessThanOverlayNavBreakpoint, appContentWidth, navbarType, isNavbarBlurEnabled, appContentLayoutNav, isVerticalNavCollapsed, footerType, isAppRTL } = storeToRefs(useLayoutConfigStore())
|
||
|
||
return {
|
||
theme,
|
||
isVerticalNavSemiDark,
|
||
skin,
|
||
|
||
// @layouts exports
|
||
isLessThanOverlayNavBreakpoint,
|
||
appContentWidth,
|
||
navbarType,
|
||
isNavbarBlurEnabled,
|
||
appContentLayoutNav,
|
||
isVerticalNavCollapsed,
|
||
footerType,
|
||
isAppRTL,
|
||
}
|
||
})
|
||
// !SECTION
|
||
// SECTION Init
|
||
export const initConfigStore = () => {
|
||
const userPreferredColorScheme = usePreferredColorScheme()
|
||
const vuetifyTheme = useTheme()
|
||
const configStore = useConfigStore()
|
||
|
||
watch([() => configStore.theme, userPreferredColorScheme], () => {
|
||
vuetifyTheme.global.name.value = configStore.theme === 'system'
|
||
? userPreferredColorScheme.value === 'dark'
|
||
? 'dark'
|
||
: 'light'
|
||
: configStore.theme
|
||
})
|
||
onMounted(() => {
|
||
if (configStore.theme === 'system')
|
||
vuetifyTheme.global.name.value = userPreferredColorScheme.value
|
||
})
|
||
}
|
||
// !SECTION
|