Can an application component use a different theme from the host (concrete application)

Support
#1

We have a requirement to show certain CUBA screens in our application using a different theme.
Most of the screens are standard CUBA screens so we want to avoid rebuilding from scratch in polymer module or portal module.

Our current approach is to extract the relevant code into an application component. Ideally we would love to be able to use a custom theme only for those pages inside the application component.

Is this possible? The docs seem to suggest that it is possible for the host application to have access to the component’s custom theme but It’s not clear whether the app-component retains it’s custom theme once the component is added to the host application.

Is this possible?

Thanks

#3

It turns out that what in my use case it’s much easier to have separate themes and allow the user to set the desired theme manually or setting the theme via code logic.

So, ignoring my first question, what is the preferred way of setting a users theme in code based on some condition? I’ve found code similar to this in the CUBA source code.

It’s not clear to me which of these methods is preferred way of doing what I need to get done.

  App.getInstance().getAppUI().setTheme("mytheme");
  App.getInstance().setUserAppTheme("mytheme");
  userSettingsTools.saveAppWindowTheme("mytheme");

Please advise

Thanks

#4

I have one last question. Is it possible to switch themes dynamically at runtime without logging out and logging back in?

#5

Hi,

It is not possible now, since a theme may contain server side variables. You can try to apply CSS theme only using Vaadin API, but some UI components and UI screens will not be updated with new server side variables.

Answering your first question, the application can have only one CSS theme, there is no way to use 2 or more themes simultaneously for different screens, but you can reuse the CSS code from app components if you extend Halo theme in a project as well.

#7

These lines are different.

  1. Changes only CSS appearance:
App.getInstance().getAppUI().setTheme("mytheme");
  1. Changes cookie and sets user setting:
App.getInstance().setUserAppTheme("mytheme");
userSettingsTools.saveAppWindowTheme("mytheme");