fix(docs): fix theme switch on SSG

package.json

@@ -12,6 +12,7 @@
   "scripts": {
     "serve": "yarn workspace vuestic-ui serve",
     "serve:book": "yarn workspace vuestic-ui serve",
+    "start:docs:ci": "yarn workspace docs start:ci",
     "serve:production": "yarn workspace vuestic-ui serve:production",
     "lint": "yarn workspace vuestic-ui lint",
     "build": "yarn workspace vuestic-ui build",

packages/docs/layouts/default.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="docs-layout">
+  <div class="docs-layout" :key="currentPresetName + isMounted">
+    <div v-if="!isMounted" class="docs-layout__loader" />
     <div
       ref="header"
       class="docs-layout__header"
@@ -31,16 +32,14 @@
 <script setup lang="ts">
 import { useColors } from 'vuestic-ui'
 import { useDocsScroll } from '../composables/useDocsScroll';
+import { useIsMounted } from 'vuestic-ui/src/composables/useIsMounted'
 
-const cookie = useCookie('vuestic-theme')
-const { applyPreset } = useColors()
+const { currentPresetName } = useColors()
 const breakpoints = useBreakpoint()
 
 const isSidebarVisible = ref(!breakpoints.smDown)
 const isOptionsVisible = ref(false)
 
-applyPreset(cookie.value || 'light')
-
 watch(() => breakpoints.smDown, (newValue, oldValue) => {
   if (newValue && !oldValue) {
     isSidebarVisible.value = false
@@ -75,6 +74,8 @@ useHead({
     { src: 'https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js', type: 'module' },
   ],
 })
+
+const isMounted = useIsMounted()
 </script>
 
 <style lang="scss">
@@ -97,6 +98,22 @@ html {
   overflow: hidden;
   font-family: var(--va-font-family);
 
+  &__loader {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 9999999;
+    background:
+      linear-gradient(
+        90deg,
+        var(--va-background-primary) 0%,
+        var(--va-background-secondary) 50%,
+        var(--va-background-primary) 100%
+      );
+  }
+
   &__header {
     width: 100%;
     background: var(--va-white);

packages/docs/nuxt.config.ts

@@ -1,17 +1,9 @@
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
-  // TEST Config
-  routeRules: {
-    '/': {static: true},
-    '/en/**': {static: true},
-    '/ru/**': {static: true},
-    '/_nuxt/**': { headers: { 'cache-control': 's-maxage=0' } },
-  },
   app: {
     head: {
       link: [
         { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
-        { rel: 'icon', type: 'image/png', href: '/favicon.png' },
       ],
 
       meta: [

packages/docs/package.json

@@ -3,8 +3,9 @@
   "name": "docs",
   "version": "0.0.1",
   "scripts": {
-    "build": "yarn build:analysis && nuxt build --max_old_space_size=4096",
-    "build:ci": "yarn build:analysis && nuxt build --max_old_space_size=4096",
+    "build": "yarn build:analysis && nuxt generate --max_old_space_size=4096",
+    "build:ci": "yarn build:analysis && nuxt generate --max_old_space_size=4096",
+    "start:ci": "yarn build:analysis && yarn preview",
     "build:analysis": "yarn workspace sandbox build:analysis ../docs/page-config/getting-started/tree-shaking",
     "serve": "yarn build:analysis --use-cache && nuxt dev",
     "generate": "yarn build:analysis && nuxt generate --max_old_space_size=4096",

packages/nuxt/src/runtime/plugin.ts

@@ -31,7 +31,7 @@ export default defineNuxtPlugin(async (nuxtApp) => {
   const configWithColors: PartialGlobalConfig = {
     ...userConfig,
     colors: {
-      currentPresetName: themeCookie.value || userConfig.colors?.currentPresetName,
+      currentPresetName: themeCookie.value || userConfig.colors?.currentPresetName || 'light',
       ...userConfig.colors,
     }
   }

packages/ui/src/composables/useColors.ts

@@ -46,12 +46,12 @@ export const useColors = () => {
   const { setGlobalConfig, globalConfig } = gc
 
   const colors = useReactiveComputed<ColorVariables>({
-    get: () => globalConfig.value.colors!.variables,
+    get: () => globalConfig.value.colors!.presets[globalConfig.value.colors!.currentPresetName],
     set: (v: ColorVariables) => { setColors(v) },
   })
 
   const setColors = (colors: Partial<ColorVariables>): void => {
-    globalConfig.value.colors!.variables = {
+    globalConfig.value.colors!.presets[globalConfig.value.colors!.currentPresetName] = {
       ...globalConfig.value.colors.variables,
       ...colors,
     } as ColorVariables
@@ -153,7 +153,6 @@ export const useColors = () => {
     if (!globalConfig.value.colors!.presets[presetName]) {
       return warn(`Preset ${presetName} does not exist`)
     }
-    globalConfig.value.colors!.variables = { ...globalConfig.value.colors!.presets[presetName] }
   }
 
   return {

packages/ui/src/services/color/plugin/create-color-config-plugin.ts

@@ -42,10 +42,6 @@ export const createColorConfigPlugin = (app: App, config?: PartialGlobalConfig)
     updateColors(newValue)
   }, { immediate: true, deep: true })
 
-  if (config?.colors?.currentPresetName) {
-    applyPreset(config.colors.currentPresetName)
-  }
-
   return {
     renderCSSVariables,
     updateColors,

packages/ui/src/services/global-config/global-config.ts

@@ -13,21 +13,23 @@ import { getColorsClassesDefaultConfig } from '../colors-classes/config/default'
 
 export const GLOBAL_CONFIG = Symbol('GLOBAL_CONFIG')
 
-export const createGlobalConfig = () => {
-  const globalConfig = ref<GlobalConfig>({
-    colors: getColorDefaultConfig(),
-    icons: getIconDefaultConfig(),
-    components: getComponentsDefaultConfig(),
-    breakpoint: getBreakpointDefaultConfig(),
-    i18n: getI18nConfigDefaults(),
-    colorsClasses: getColorsClassesDefaultConfig(),
-    /**
-     * global config variable to pass nuxt-link component to vuestic-ui via @vuestic/nuxt
-     * TODO: give a try to integrate inertia js router components via this option
-     * TODO: if this try won't be success, may be remake to provide/inject
-     */
-    routerComponent: undefined,
-  }) as Ref<GlobalConfig>
+const getDefaultConfig = () => ({
+  colors: getColorDefaultConfig(),
+  icons: getIconDefaultConfig(),
+  components: getComponentsDefaultConfig(),
+  breakpoint: getBreakpointDefaultConfig(),
+  i18n: getI18nConfigDefaults(),
+  colorsClasses: getColorsClassesDefaultConfig(),
+  /**
+   * global config variable to pass nuxt-link component to vuestic-ui via @vuestic/nuxt
+   * TODO: give a try to integrate inertia js router components via this option
+   * TODO: if this try won't be success, may be remake to provide/inject
+   */
+  routerComponent: undefined,
+})
+
+export const createGlobalConfig = (defaultConfig: PartialGlobalConfig = {}) => {
+  const globalConfig = ref<GlobalConfig>(mergeDeep(getDefaultConfig(), defaultConfig)) as Ref<GlobalConfig>
 
   const getGlobalConfig = (): GlobalConfig => globalConfig.value
   const setGlobalConfig = (updater: GlobalConfig | GlobalConfigUpdater<GlobalConfig>) => {

packages/ui/src/services/global-config/plugin/index.ts

@@ -4,11 +4,9 @@ import { PartialGlobalConfig } from '../types'
 import { defineGlobalProperty, defineVuesticPlugin } from '../../vue-plugin/utils'
 
 /** Provides global configuration to Vuestic components */
-export const GlobalConfigPlugin = defineVuesticPlugin((config: PartialGlobalConfig | undefined) => ({
+export const GlobalConfigPlugin = defineVuesticPlugin((config: PartialGlobalConfig | undefined = {}) => ({
   install (app: App) {
-    const globalConfig = createGlobalConfig()
-
-    if (config) { globalConfig.mergeGlobalConfig(config) }
+    const globalConfig = createGlobalConfig(config)
 
     // @ts-ignore
     if (config?.componentsAll) {