A week at e4 – Themeing in e4

Core Work-Items

Themeing in e4 is done using CSS like Declarative Syntax. The latest nightly builds introduce an extension point which allows people to define and contribute CSS-Files to make up a theme from different css-Files.

So now plugin-developers can contribute stylesheets which hold CSS-Definitions (classes, …) they use in their UI-Bundles. One of the interesting things in this sense is that even the latest 3.6 builds can make use of the CSS themeing support (an example is my Workbench-Modeleditor which now runs unmodified in 3.6).

The extension point is used to make up a theme in a declarative manner but IThemeManager is also registered in the OSGi-Service registry and can be access by client code e.g. to switch the UI-Theme on the fly.

In 3.x e.g. like this:

public class CSSViewPart extends ViewPart {
  private static final String CSS_CLASS_KEY = "org.eclipse.e4.ui.css.CssClassName"; //$NON-NLS-1$

  public void createPartControl(Composite parent) {
    Bundle b = FrameworkUtil.getBundle(getClass());
    BundleContext ctx = b.getBundleContext();
    ServiceReference ref = ctx.getServiceReference(IThemeManager.class.getName());

    IThemeManager mgr = (IThemeManager) ctx.getService(ref);
    final IThemeEngine engine = mgr.getEngineForDisplay(parent.getDisplay());
    // ...

In e4 you’d better use simply @Inject to even get the theme engine bound to the workbench instance:

public class CSSView {
  private IThemeManager manager;

  private IThemeEngine engine;

An example CSS-File could look like this:

.h2 {
	color: white;
    font-size: 20pt;

.container {
    background-color: gradient radial #575757 #101010 60%;

and the Java-Code to use it

final Composite p = new Composite(parent, SWT.NONE);
p.setData(CSS_CLASS_KEY, "container");
p.setLayout(new GridLayout(2, false));

Label l = new Label(p, SWT.NONE);
l.setData(CSS_CLASS_KEY, "h2");
l.setText("This is a headline");
l.setLayoutData(new GridData(SWT.FILL, SWT.DEFAULT, false, false, 2, 1));

engine.applyStyles(p, true); // Apply the CSS-Instructions of the current active theme

The last line applies the current theme CSS-Information on all elements below the given widget.

Switching between themes is quite easy using:


Which makes the 3.x ViewPart look like this with a radial black gradient:

or a bright one:

The currently needed plug-ins from e4 and orbit are:

Model Editor

I started refactoring some code so that model modification can be run using the e4-CommandService. Beside that I added support for Main-Menu creation and fixed some other small things.

Update: Added description how to use the IThemeEngine, …

This entry was posted in A week at e4, e4. Bookmark the permalink.

13 Responses to A week at e4 – Themeing in e4

  1. Thomas says:

    And for the newbie: How will the IThemeEngine affect controls then ?

  2. Is there anyway to bake in the theme support in 3.6? Creating your own view parts to give them the ability to be themed is kind of cumbersome.

    • tomeclipsedev says:

      There’s a default theme created and it is applied to the display at the start. The main problem is that none of the widgets, … have assigned IDs so all you can do is to globally redefine controls but I’m not sure this what you are looking for. The extension point allows you to contribute to this default theme. So what we could probably ship is something that creates a Perference Page to switch the theme.

  3. Max Bureck says:

    Does the engine know default keys for the controls (e.g. qualified class names) following the convention over configuration paradigm? In other words: is it possible to theme elements that were not prepared using l.setData(CSS_CLASS_KEY, … )?
    BTW: That stuff is very cool, great work!

    • tomeclipsedev says:

      Yes. You can use Tree {}, Table {}, Composite {}, … but this will then naturally apply to ALL tables, trees, composite, … probably not what you want just like you use H2 {}, DIV {} in HTML+CSS. IIRC you can even use Composite.mycomp > Tree {} which would only apply to a Tree which is below a composite with the CSS-Class mycomp (but I might be wrong here).

  4. Pingback: A week at e4 – Share me please « Tomsondev Blog

  5. Lars Vogel says:

    Thanks Tom. I updated in cvs the “org.eclipse.e4.ui.examples.css.rcp” example to use the Theme Manager.

    Here is use ApplicationWorkbenchAdvisor initialize() to set another theme then the default one. I think setting lots of attributes to the default via extensioin points can be tiresome.

  6. Lars Vogel says:

    Forget my last sentence in the previous comment.

  7. Pingback: Eclipse 3.6 styling with CSS and the ThemeManager » Eclipse Papercuts

  8. Stefan Nöbauer says:

    Is there a way to directly access the css via CSSEngine? I was trying to set the colors of the Eclipse 3.6 TabItem by simply try to get the background-color from the CSS ….. something like engine.getStyle(“TabItem”);

  9. Pingback: How to: Eclipse IDE for Java – Full Dark Theme | SevenNet

  10. Pingback: Solution: Eclipse IDE for Java – Full Dark Theme #dev #it #computers | Technical information for you

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.