81 lines
2.0 KiB
TypeScript
81 lines
2.0 KiB
TypeScript
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<'light' | 'dark'>('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
|