Changing GWT theme Dynamically

Question

I have a GWT application, I created appBlueTheme.jar,appOrangeTheme.jar and added to BuildPath of project. My module.gwt.xml file has

 ....
<inherits name='appBlueTheme.appBlueTheme'/>
<inherits name='appOrangeTheme.appOrangeTheme'/>
 ...

But in my app i see the effect of appBlueTheme as GWT doc say

"inherited modules will be cascaded in the order they are listed"

I want theme to be changed based on user response. How do i achieve this?

Take a look at this one: http://stackoverflow.com/questions/5603880/themechanger-in-gwt-ext — RAS, Oct 09 '12 at 09:26
This question is closed by mistake. The suggested duplicate deals with a different framework - GWT-Ext. — Andrei Volgin, Oct 09 '12 at 23:56
@AndreiVolgin GWT-Ext framework is used only to take user input for selection of theme. The main logic "dynamic theme change" is done using GWT only. — RAS, Oct 10 '12 at 08:45
That question is about GXT (in the title and tags). It has no accepted answers, and the only answer provided is specific to GXT. How does it make it a duplicate? — Andrei Volgin, Oct 10 '12 at 12:02

Andrei Volgin · Accepted Answer · 2014-03-07T21:05:11.743

If by "theme" you mean styling, the right approach is not to create a separate jar for each theme, but to use CSS instead.

A. If you use CSSResource, you can use conditional CSS:

https://developers.google.com/web-toolkit/doc/latest/DevGuideClientBundle#Conditional_CSS

B. If you use an external CSS file, instead of

.headerPanel {
    background: blue;
}

you can specify a different background based on a theme selected:

.orangeTheme .headerPanel {
    background: orange;
}
.blueTheme .headerPanel {
    background: blue;
}

Note that your code (or Ui:Binder) should only assign class "headerPanel" to a widget. When you start your app, you assign a default theme to your outmost widget (the one you add to the RootPanel). For example, you set

myAppPanel.addStyleName("blueTheme");

This will give a blue background to all widgets with "headerPanel" class. When a user chooses a different theme, you remove "blueTheme" class and add "orangeTheme" class. It will automatically refresh the page (no need to reload it) and all styles will change.

EDIT:

If you need to apply a theme to the entire app, including PopupPanel and dialogs, use this code to apply your theme:

Document.get().getBody().setClassName("blueTheme");

Approach B should work without a page refresh, shouldn't it? Going `myAppPanel.removeStyleName("blueTheme"); myAppPanel.addStyleName("orangeTheme");` should trigger an app-wide re-rendering of DOM elements (haven't tried myself). — Boris Brudnoy, Oct 09 '12 at 19:24
Excellent catch. I did not mean to say "reload" the page. I edited the answer to make it clear. — Andrei Volgin, Oct 09 '12 at 23:33

Changing GWT theme Dynamically

1 Answers1