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
 }