vuetify-module icon indicating copy to clipboard operation
vuetify-module copied to clipboard

Wrong text color on initial page with SSR

Open jarkt opened this issue 5 years ago • 0 comments

Module version @nuxtjs/vuetify 1.11.2

Description I get the wrong text color on initial page load when light theme is the default but the page is delivered in dark mode from SSR. This is my module config:

// nuxt.config.js

buildModules: [
  ['@nuxtjs/vuetify', {
    customVariables: ['~/assets/variables.scss'],
    treeShake: true,
    theme: {
      options: {
        customProperties: true,
        variations: false
      },
      dark: false, // From 2.0 You have to select the theme dark or light here
      themes: {
        light: {
          primary: '#444',
          secondary: '#aa0000',
          accent: '#ff0000',
          error: '#C65159',
          info: '#2196F3',
          success: '#84BF41',
          warning: '#D8C00D'
        },
        dark: {
          primary: '#ddd',
          secondary: '#c83737',
          accent: '#de8787',
          error: '#C65159',
          info: '#2196F3',
          success: '#84BF41',
          warning: '#D8C00D'
        }
      }
    }
  }]
]

To deliver the page in the user selected mode I store the setting in a cookie and set it like this in the layout component:

// layouts/default.vue

created () {
  this.$vuetify.theme.dark = this.$cookies.get('WebsiteSettings').WebsiteSettings.dark
}

When the page loads, all the custom variables from ~/assets/variables.scss are applied and also the colors from the module settings. But two ticks later the colors from the module settings are overridden with the default theme settings. I have a workaround, but it's only a workaround and I don't know the real reason for this behaviour.

// layouts/default.vue

created () {
  this.$vuetify.theme.dark = this.$cookies.get('WebsiteSettings').WebsiteSettings.dark

  // Workaround:
  this.$nextTick(() => {
    this.$nextTick(() => {
      // eslint-disable-next-line no-self-assign
      this.$vuetify.theme.dark = this.$vuetify.theme.dark
    })
  })
}

Steps to reproduce

https://codesandbox.io/s/zen-golick-k5xn6?file=/layouts/default.vue

1.) Load sandbox 2.) Switch to Dark Theme 3.) Click reload button 4.) Note that nothing changes 5.) Comment out "this.$vuetify.theme.dark = this.$vuetify.theme.dark;" 6.) Click reload button 7.) Note that the switch button has a wrong color

BTW: Maybe it's better to report it to the vuetify repository?

jarkt avatar Dec 07 '20 12:12 jarkt