Theme reverts from material to lumo on navigation

I have an applayout that implements a routerlayout and I’ve applied the Material theme to this base class. Initially if I go directly to a page that is handled by this routerlayout the page shows the styles correctly. However, I have a standalone class that I can also navigate to and I am not able to apply the material theme to this class correctly. If I try to apply the @Theme annotation I get the following error:

“java.lang.RuntimeException: com.vaadin.flow.server.InvalidRouteLayoutConfigurationException: Theme annotation needs to be on the top parent layout”

So I am left with the problem where when I navigate to this other page it reverts back to Lumo and when I navigate to my other pages it reverts to Material but only after refreshing the page.

Is there a way to deal with this?

Hi Sabas,

So the standalone and app layout classes don’t have a common parent?

No, I mis-spoke in my previous post, I had made changes to it in hopes of fixing it but in reverting it back to its original non-working state it did have the applayout as its parent. It’s basically a default content area that is shown when the user first loads the page.

When the page first loads it displays the lumo theme even though the material theme has been declared in the code, I navigate away and refresh the page and it loads the material theme. If I navigate back to the initial page and refresh it will revert back to the lumo theme. I have no other style declarations aside from @Theme(Material.class) in my code that is applied to my MainLayout class.

Hey Sabas,

Would you be able to provide a small runnable example showcasing the issue? It would help us debug and identify any potential issues.

I have been trying to replicate with one of the vaadin standalone projects but it doesn’t seem to be exhibiting the same behavior. The main differences between the two are no afternavigation events and integration with keycloak. Could either of those be the issue?

Hey Sabas,

Hard to tell without seeing it in person. Try temporarily removing the navigation events or disabling Keycloak and see if there’s any change?

I was able to narrow it down to the afternavigation event on the mainview. For whatever reason it is reverting the styles for my vaadin elements back to the lumo theme. I fixed it by removing the implementation for AfterNavigationObserver and it seems to have corrected itself.

edit: I might be able to make a sample demo to attach to this post now. I will attach it if I am successful.

I was able to narrow it down to the afternavigation event on the mainview. For whatever reason it is reverting the styles for my vaadin elements back to the lumo theme. I fixed it by removing the implementation for AfterNavigationObserver and it seems to have corrected itself.

edit: I might be able to make a sample demo to attach to this post now. I will attach it if I am successful.

edit: sample attached. the issue in the application seems to be the @Dependent annotation in the MainView class to show user info after they’ve logged in. I “fixed” it by removing the afterNavigation stuff, that meant I had also removed the @Dependent annotation which inadvertently fixed it. The sample I’ve included does exhibit the style switching. If you go to the MainView and refresh it reverts to Lumo. Then navigate to the search form and refresh and it reverts back completely to the Material theme. Navigate back to the MainView and refresh and it reverts back to Lumo.
17785892.zip (273 KB)