Vuetify: [Bug Report] Explicitly defined theme color for a component reverts back on page navigation even though theme property changed

[manastalukdar]

Versions and Environment

Vuetify: 2.0.0-beta.8
Vue: 2.6.10
Browsers: Vivaldi 2.7.1609.4
OS: Windows 10

Steps to reproduce

1. Run the Python script scripts/create_blog_metadata.py. The prerequisite python packages can be installed using the scripts/python-requirements.txt file.
2. Run npm run nuxt-dev
3. Open the website (localhost) in any browser.
4. Click on the change theme icon in the top nav bar. Your theme will now change from the default dark to light.
5. Click on a link (any link, say Legal in the top bav bar).
6. The top nav bar and footer will now revert back to the dark theme colors.
7. Go back to the home page. You will see that all components that have explicitly a color defined have reverted back to the default dark color.

Expected Behavior

Colors as defined under theme options stay put after navigation to a different link, even though the theme property has changed from dark to light and vice versa.

Actual Behavior

All components that have explicitly a color defined have reverted back to the default dark color.

Reproduction Link

https://github.com/manastalukdar/manastalukdar.github.io/tree/source/website

Other

• Using Nuxt.
• Using the @nuxtjs/vuetify, 1.0.0-beta.7 module.

[manastalukdar]

I have a website built using Nuxt and Vuetify 1.x that I am migrating to Vuetify 2.x. I am using the (beta version of) Nuxt-Vuetify module for Vuetify 2.x.

My nuxt.config.js has themes defined as follows:

theme: {
      dark: true,
      themes: {
        dark: {
          headerAndFooterColor: colors.blue.darken3,
          cardColor: colors.blueGrey.darken4,
          primary: colors.teal.lighten3          
        },
        light: {
          headerAndFooterColor: colors.blue.lighten4,
          cardColor: colors.shades.white,
        }
      }

I have a button in my nav bar that allows for switching between dark and light themes as follows:

@click="$vuetify.theme.dark = !$vuetify.theme.dark"

This works just fine, as long as I stay on the same page. As soon as I navigate to a different page, all components with the custom colors headerAndFooterColor, cardColor and primary revert back to the default color scheme. The default color scheme being dark in this case. If I set dark: false, the vice versa happens.

I have verified that $vuetify.theme.dark is correct, both when changing its value by clicking the theme change button and when changing views. So, the value changes when explicitly changing its value by clicking the button, and stays that way when changing views, until it is explicitly changed back by clicking the button again.

When I change views, $vuetify.theme.dark remains the same (as expected). All components that do not have a custom color defined in them behave as expected. Only those components that have a custom color, either in markup, such as <v-app-bar color="headerAndFooterColor" app>, or in css, such as .theme--light a { color: #31805c; }, revert back to the default theme color.

This behavior only happens with controls with custom classes as defined in the theme as shown above. Its almost as if the custom colors headerAndFooterColor, cardColor or primary revert back to the values corresponding to the default theme (depending on dark: true or not) on changing views.

Repro gif available here.

If you are having trouble running the Python script (repro step 1 of first post under issue), follow these steps to not have to run the script:

1. Get _blog_metadata.json_ file from here.
2. Under the website/static folder, create a new folder called blogdata.
3. Under blogdata folder create a new folder called metadata and copy the _blog_metadata.json_ from step 1 into this new website/static/blogdata/metadata folder.
4. Copy the folder (along with all sub-folders) website/blog/2019 into website/static/blogdata. website/static/blogdata should now have 2 subfolders: 2019 and metadata.

That should be it. npm run nuxt-dev should now work.

[manastalukdar]

Similar issue: https://github.com/vuetifyjs/vuetify/issues/7481.

In this particular issue, however, the generated styles in "vuetify-theme-stylesheet", for explicitly defined items such as headerAndFooterColor, cardColor or primary revert back to the defaults (depending on dark: true or not) on page navigation.

[kevinmarrec]

@manastalukdar I followed your instructions, it ends up with

Cannot find module 'src/components/pages/index.js' from '/home/kevin/tmp/manastalukdar.github.io/website'

on my computer :/, have you any ideas why ?

Even if your custom SCSS variables will be broken, can you try setting treeShake: false in vuetify module options ? Just to see if it's related. Thanks.

[manastalukdar]

@kevinmarrec Just tried treeShake: false. Does not solve the problem.

I am really not sure why you are getting that Cannot find module... error. I do not recall ever running into it. Are you working off of the right branch feature/vuetify2?

[manastalukdar]

@kevinmarrec The Cannot find module... index.js error seems to a random nuxt.js issue that has been reported in the past on Linux and Mac OS's (https://github.com/nuxt/nuxt.js/issues/5132). I just tried it running npm run nuxt-dev using my repro project on a Linux OS and ran into the exact same problem. If you have a Windows machine that might work better.

[kevinmarrec]

@manastalukdar I'm indeed on a Linux machine, but didn't face this issue in my Nuxt projects, why would it happen here, seems weird and persisting, will try again tomorrow. And yes I was on the right branch

[theomjones]

I've come across something similar too, when running Vuetify in nuxt's spa mode, you cannot dynamically update the theme colors from a component, but you can update it from within a plugin (by accessing context).

I opened an issue in the vuetify community module as I wasn't sure where the problem lives. However, maybe it's a Vuetify problem.

See issue here: https://github.com/nuxt-community/vuetify-module/issues/69

[kevinmarrec]

@manastalukdar Do you still have issue with last version of the module ? AFAIK the dynamically change of theme should only be broken in SPA mode and a fix is on his way here : https://github.com/vuetifyjs/vuetify/pull/8079

[manastalukdar]

@kevinmarrec Yes issue persists even with the latest version of the module. I am using universal mode.

[manastalukdar]

With the latest version of vuetify-module (1.1.0), there is now a slight change in behavior. On page navigation, instead of reverting to the custom colors for the default theme as defined in the theme options, we now end up reverting back to the default colors for the non-default theme. So, here is the new workflow:

1. Start with dark (default theme).
2. Change theme to light (on the same page). Header, footer change background color to light blue as defined in theme options, as expected.
3. Navigate to different page. Background color for header, footer background color revers back to white (default for the light theme).

[manastalukdar]

@kevinmarrec After installing vue-meta 2.2.0, the original issue as described in this thread no longer exists. However, there is now a slight variation of the original issue:

1. Go to home page. Default dark theme exists.
2. Navigate to a different page. Theme will revert from custom colors in dark theme to the default dark theme colors.

Interestingly, the above issue will not manifest in the following workflow:

1. Go to home page. Default dark theme exists.
2. Switch theme to light.
3. Navigate to a different page. Everything is still fine.
4. Switch theme again and navigate to different page. Everything is still fine.

So, if the default theme is not switched (ever), only then the custom colors for the default theme will revert to the default colors on page navigation.

The other issue with nuxt generate as described here still exists.

[kevinmarrec]

@manastalukdar If i'm right last Vuetify version which ships a PR i did, is broken whith Vue Meta.

I'm working on a fix, it may fix every issue people could have with theme and route navigation.

Theme on Route navigation should be only broken when setting head in the pages if i'm right

[kevinmarrec]

@manastalukdar I think everything should be fixed by using vue-meta 2 + new Vuetify release with this PR (https://github.com/vuetifyjs/vuetify/pull/8234)

The PR may even fix the issue without having to upgrade vue-meta (the important hint of the PR is giving head as function instead of an object around the Vue instance used to update theme with VueMeta : https://github.com/vuetifyjs/vuetify/pull/8234/files#diff-7e7dfb127aa3d7eaee25f61adfccd2bbR181)

[P4sca1]

I am experiencing a similar issue on webpack hmr.
Is this related and also fixed in #8234?

[kevinmarrec]

@P4sca1 Yes, at least i'm sure it's fixing it in Nuxt with universal mode (there's still some issues regarding SPA with VueMeta, see the PR description)

[manastalukdar]

Just verified that this issue is fixed with PR https://github.com/vuetifyjs/vuetify/pull/8234 in latest vuetify without having to upgrade vue-meta to v2.

[P4sca1]

The problems with webpack hmr are also fixed.