How to change Vaadin portlet theme in Liferay Portal dynamically.

Hi Vaadin Folks,

Can anyone suggest me best way to switch between themes (runo, reindeer, or custom) for Vaadin portlet in Liferay Portal.

Is there is any way to do in the same way like Liferay does for changing the themes (i.e b/w classic theme & other…). from Manage page (liferay dockbar).
i.e can i change vaadin theme from Liferay Control panel.

somehow i have to get vaadin theme name at the render method of portlet & setTheme() in all vaadin portlet application in particular page.

Waiting for a valuable solution.

Thanks in advance.

BR,
Chethan

Hi,

i’ve conflict between the default theme (i.e liferay or vaadin.theme=runo set in portal-ext.properties) with other theme set using setTheme(“reindeer”) method in vaadin portlet inlt() method. Both theme will be loaded on the page. Some how if make any one theme to load. This might solve my problem to change the Vaadin theme dynamically.

Waiting for reply to know how to change the Vaadin Theme dynamically in Liferay through any way.

Regards,
Chethan

My first question would be: Why do you want to change whole themes dynamically (as opposed to smaller changes in the look)? Usually, just making smaller adjustments by changing style names and having a few rules for the alternative styles is more appropriate.

The theme that is specified in portal-ext.properties is always loaded if I remember correctly, and the parameter has a default value. However, an explicit “setTheme()” call forces also that theme to be loaded. If you have multiple portlets on a page, all their themes are loaded which might lead to conflicts if they are not compatible.

You could specify “base” as the portal level theme (both reindeer and runo inherit it) and then either one for a portlet, but if you have two portlets on a page with different themes, both will be loaded leading again to conflicts.

The theme cannot be changed safely dynamically without reloading the page (layout size calculations need to be redone etc.) so you would need to force a reload.

Vaadin 7 will remove setTheme() - there are other ways to do that at UI start-up - but will on the other hand also provide much more flexibility through style names, which should also let two portlets on the same page effectively use different themes etc. (might need some tweaking of the page level general CSS rules to make your themes compatible).

You might be happy to learn that we added setTheme functionality to Vaadin 7.3.0.

See https://vaadin.com/wiki/-/wiki/Main/Changing+theme+on+the+fly for a very simple example on how this is used.