Platinum Partner
eclipse,frameworks

Eclipse 4.0 RCP: Dynamic CSS Theme Switching

The css theming capabilities of the Eclipse 4.0 SDK are improving. Especially the mechanism to implement a dynamic theme switcher is much easier now. If you want to implement a css theme switcher, you just need to contribute to the extension point org.eclipse.e4.ui.css.swt.theme. Here is an example from my e4 contacts demo for declaring two themes:

<extension
point="org.eclipse.e4.ui.css.swt.theme">
<theme
basestylesheeturi="css/dark-gradient.css"
id="org.eclipse.e4.demo.contacts.themes.darkgradient"
label="Dark Gradient Theme">
</theme>
<theme
basestylesheeturi="css/bright-gradient.css"
id="org.eclipse.e4.demo.contacts.themes.brightgradient"
label="Bright Gradient Theme">
</theme>
</extension>

Then you need to specify a handler that does the actual theme switching. Here is the whole handler code for switching to the dark gradient theme:

public class DarkThemeHandler {

@Execute
public void execute(IThemeEngine engine) {
engine.setTheme("org.eclipse.e4.demo.contacts.themes.darkgradient");
}
}

Use the workbench model to bind this handler to a menu or tool bar item — that’s it. The two screenshots show the results when dynamically switching between the dark and the bright theme.

Kai

From http://www.toedter.com/blog/?p=113

{{ tag }}, {{tag}},

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}
{{ parent.authors[0].realName || parent.author}}

{{ parent.authors[0].tagline || parent.tagline }}

{{ parent.views }} ViewsClicks
Tweet

{{parent.nComments}}