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$
@Override
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 {
@Inject
private IThemeManager manager;
@Inject
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.setBackgroundMode(SWT.INHERIT_DEFAULT);
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:
engine.setTheme("org.eclipse.e4.demo.contacts.dark");
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, …
Tomsondev Blog 
And for the newbie: How will the IThemeEngine affect controls then ?
I’ve added some information to the blog how to apply style sheets, switch themes, …
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.
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.
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!
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).
Pingback: A week at e4 – Share me please « Tomsondev Blog
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.
Forget my last sentence in the previous comment.
Pingback: Eclipse 3.6 styling with CSS and the ThemeManager » Eclipse Papercuts
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”);
Pingback: How to: Eclipse IDE for Java – Full Dark Theme | SevenNet
Pingback: Solution: Eclipse IDE for Java – Full Dark Theme #dev #it #computers | Technical information for you