Fix/dark theme blink (#3387)

* fix: refactor nuxt module plugin ts types

* feat(nuxt): save theme in cookies

* chore(docs): remove useTheme

packages/docs/components/layout/header/ThemeSwitch.vue

@@ -25,13 +25,11 @@
 import { computed } from 'vue'
 import { useColors } from 'vuestic-ui'
 
-const { currentPresetName } = useColors()
-
-const { setTheme } = useTheme()
+const { currentPresetName, applyPreset } = useColors()
 
 const isDark = computed({
   get: () => currentPresetName.value === 'dark',
-  set: (value) => setTheme(value ? 'dark' : 'light'),
+  set: (value) => applyPreset(value ? 'dark' : 'light'),
 })
 </script>
 

packages/docs/config/vuestic-config.ts

@@ -11,10 +11,6 @@ const VaButtonLandingHeader = {
   'hover-opacity': '1',
 }
 
-// const cookie = useCookie('vuestic-theme')
-
-const theme = 'light'
-
 export const VuesticConfig = defineVuesticConfig({
   icons,
   components: {
@@ -39,7 +35,6 @@ export const VuesticConfig = defineVuesticConfig({
     },
   },
   colors: {
-    currentPresetName: theme,
     presets: {
       light: {
         secondary: '#666E75',

packages/docs/layouts/default.vue

@@ -32,15 +32,14 @@
 import { useColors } from 'vuestic-ui'
 import { useDocsScroll } from '../composables/useDocsScroll';
 
-const colorMode = useColorMode()
 const cookie = useCookie('vuestic-theme')
 const { applyPreset } = useColors()
 const breakpoints = useBreakpoint()
 
 const isSidebarVisible = ref(!breakpoints.smDown)
 const isOptionsVisible = ref(false)
 
-applyPreset(cookie.value || colorMode.preference)
+applyPreset(cookie.value || 'light')
 
 watch(() => breakpoints.smDown, (newValue, oldValue) => {
   if (newValue && !oldValue) {

packages/nuxt/nuxt.shim.d.ts

@@ -2,7 +2,22 @@ declare module '#app' {
   export * from 'nuxt/app'
 }
 
+declare module '#app/components/nuxt-link' {
+  export * from 'nuxt/dist/app/components/nuxt-link.ts'
+  export { default as default } from 'nuxt/dist/app/components/nuxt-link.ts'
+}
+
 // Path to vuestic-ui main, so it is not required to build vuestic before working with packages/nuxt
 declare module 'vuestci-ui' {
   export * from 'vuestic-ui/src/main'
+}
+
+declare module '#imports' {
+  export * from 'nuxt/dist/head/runtime/composables.ts'
+}
+
+declare module '#vuestic-config' {
+  import { GlobalConfig } from 'vuestic-ui'
+  var gc: GlobalConfig | undefined
+  export default gc
 }

packages/nuxt/src/module.ts

@@ -22,6 +22,7 @@ export default defineNuxtModule<VuesticOptions>({
     config: {},
     css: ['smart-helpers', 'typography'],
     fonts: true,
+    themeCookieKey: 'vuestic-theme',
   },
 
   setup (options) {

packages/nuxt/src/runtime/plugin.ts

@@ -5,34 +5,41 @@ import {
   VaModalPlugin,
   ColorsClassesPlugin,
   BreakpointConfigPlugin,
+  type GlobalConfig,
+  type PartialGlobalConfig
 } from 'vuestic-ui'
-import { markRaw, computed } from 'vue'
+import { markRaw, computed, watch, type Ref } from 'vue'
 
-import type { VuesticOptions } from '../types'
-// @ts-ignore: nuxt import alias
-import { defineNuxtPlugin } from '#app'
-// @ts-ignore: direct nuxt-link import
+import { defineNuxtPlugin, useCookie } from '#app'
+import { useHead } from '#imports'
 import NuxtLink from '#app/components/nuxt-link'
-// @ts-ignore: use-config-file import alias
 import configFromFile from '#vuestic-config'
-// @ts-ignore: use-head import alias
-import { useHead } from '#imports'
+
+import type { VuesticOptions } from '../types'
 
 function getGlobalProperty (app, key) {
   return app.config.globalProperties[key]
 }
 
-export default defineNuxtPlugin((nuxtApp) => {
+export default defineNuxtPlugin(async (nuxtApp) => {
   const { vueApp: app } = nuxtApp
 
   // It's important to use `, because TS will compile qoutes to " and JSON will not be parsed...
-  const { config }: VuesticOptions = JSON.parse(`<%= options.value %>`)
-  const userConfig = configFromFile || config
+  const moduleOptions: VuesticOptions = JSON.parse(`<%= options.value %>`)
+  const themeCookie = useCookie(moduleOptions.themeCookieKey)
+  const userConfig = configFromFile || moduleOptions.config || {}
+  const configWithColors: PartialGlobalConfig = {
+    ...userConfig,
+    colors: {
+      currentPresetName: themeCookie.value || userConfig.colors?.currentPresetName,
+      ...userConfig.colors,
+    }
+  }
 
   /** Use tree-shaking by default and do not register any component. Components will be registered by nuxt in use-components. */
   app.use(createVuesticEssential({
-    config: { ...userConfig, routerComponent: markRaw(NuxtLink) },
-    // TODO: Would be nice to tree-shake plugins, but they're small so we don't cant for now.
+    config: { ...configWithColors, routerComponent: markRaw(NuxtLink) },
+    // TODO: Would be nice to tree-shake plugins, but they're small so we can let it be for now.
     // Should be synced with create-vuestic.ts
     plugins: {
       BreakpointConfigPlugin,
@@ -66,4 +73,10 @@ export default defineNuxtPlugin((nuxtApp) => {
       }
     }))
   }
+
+  // Watch for preset name change and update cookie
+  const { globalConfig } = getGlobalProperty(app, '$vaConfig') as { globalConfig: Ref<GlobalConfig> }
+  watch(() => globalConfig.value.colors.currentPresetName, (newTheme) => {
+    themeCookie.value = newTheme
+  }, { immediate: true })
 })

packages/nuxt/src/types.ts

@@ -32,11 +32,12 @@ export interface VuesticOptions {
    * @see https://vuestic.dev/en/getting-started/installation#assets-installation
    */
   fonts: boolean
-}
 
-/** Declare Vuestic module options in NuxtConfig */
- declare module '@nuxt/schema' {
-  interface NuxtConfig {
-    vuestic?: Partial<VuesticOptions>
-  }
+
+  /**
+   * Vuestic will automatically store its theme in cookies. If you want to change the key, you can do it here.
+   * 
+   * @default 'vuestic-theme'
+   */
+  themeCookieKey: string
 }