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

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

Run the Python script scripts/create_blog_metadata.py. The prerequisite python packages can be installed using the scripts/python-requirements.txt file.
Run npm run nuxt-dev
Open the website (localhost) in any browser.
Click on the change theme icon in the top nav bar. Your theme will now change from the default dark to light.
Click on a link (any link, say Legal in the top bav bar).
The top nav bar and footer will now revert back to the dark theme colors.
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.

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 2
Comments: 17 (6 by maintainers)

Most upvoted comments

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.

manastalukdar on Aug 1, 2019

@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)

kevinmarrec on Aug 1, 2019

@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)

kevinmarrec on Aug 1, 2019

@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 on Jul 31, 2019

@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:

Go to home page. Default dark theme exists.
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:

Go to home page. Default dark theme exists.
Switch theme to light.
Navigate to a different page. Everything is still fine.
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.

manastalukdar on Jul 31, 2019