Changing GWT theme Dynamically - css

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?

Answer 1

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");