Wrong text color on initial page with SSR
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?