-
-
Notifications
You must be signed in to change notification settings - Fork 6.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Bug Report] Explicitly defined theme color for a component reverts back on page navigation even though theme property changed #7879
Comments
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:
I have a button in my nav bar that allows for switching between dark and light themes as follows:
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 I have verified that When I change views, This behavior only happens with controls with custom classes as defined in the theme as shown above. Its almost as if the custom colors 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:
That should be it. |
Similar issue: #7481. In this particular issue, however, the generated styles in "vuetify-theme-stylesheet", for explicitly defined items such as |
@manastalukdar I followed your instructions, it ends up with
on my computer :/, have you any ideas why ? Even if your custom SCSS variables will be broken, can you try setting |
@kevinmarrec Just tried I am really not sure why you are getting that |
@kevinmarrec The |
@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 |
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: nuxt-community/vuetify-module#69 |
@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 : #8079 |
@kevinmarrec Yes issue persists even with the latest version of the module. I am using |
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:
|
@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:
Interestingly, the above issue will not manifest in the following workflow:
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 |
@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 |
@manastalukdar I think everything should be fixed by using The PR may even fix the issue without having to upgrade |
I am experiencing a similar issue on webpack hmr. |
@P4sca1 Yes, at least i'm sure it's fixing it in Nuxt with |
Just verified that this issue is fixed with PR #8234 in latest vuetify without having to upgrade vue-meta to v2. |
The problems with webpack hmr are also fixed. |
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
scripts/create_blog_metadata.py
. The prerequisite python packages can be installed using thescripts/python-requirements.txt
file.npm run nuxt-dev
change theme
icon in the top nav bar. Your theme will now change from the default dark to light.Legal
in the top bav bar).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
@nuxtjs/vuetify
,1.0.0-beta.7
module.The text was updated successfully, but these errors were encountered: