first commit

resources/js/@core/stores/config.js

@@ -0,0 +1,63 @@
+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