One of the nice things of Eclipse 4.0 is that you can change its Look & Feel using CSS. In this blog post you’ll learn how you can write your own theme and use it in our workbench.

The Eclipse 4.0 SDK comes along with 3 themes (on WinXP with 4 and Win7 with 5):

• %OS-Default%: Default theme which should blend best into your OS-System
• Default Theme: A standard theme
• Win XP Classic: 3.x L&F for this who don’t like the new tabs

If you are not happy with any of them you are able to tweak the layout of the running Eclipse Version by writing your own theme. You might say that this has been possible already in 3.x by writing your own presentation and you are right but for that you would have to make yourself familiar with the Presentation-API.

The setup

To start developing themes for Eclipse 4.0 you naturally have to download Eclipse 4.0 SDK following this link and afterwards we should install the source bundles for the following features:

• E4 UI > Eclipse E4 UI CSS Source
• E4 UI > Eclipse e4 Modeled Workbench Source

Project-Creation/Configuration

Afterwards create an OSGi-Projekt (a plain one without any dependencies and no Activator) all we do here is to use an extension point to contribute a CSS-File and add “org.eclipse.e4.ui.css.swt.theme” as the only “Required Plug-in”.

Create a folder in the project named “css” and create a text file named “mytheme.css”. Your workspace should look like this now:

Contributing Theme

To contribute a theme we are using an extension point named “org.eclipse.e4.ui.css.swt.theme” which allows us to contribute 2 different things:

• theme: A theme is made up of at least one CSS file (the basestyle) and an unbound number of contributed stylesheets.
• stylesheet: Plug-in developers are able to contribute CSS-stylesheets to existing themes so that their own component blends best into the base theme

Our aim is to create a new theme and so we enter the following informations:

• id: mytheme
• label: My Custom Theme
• basestylesheeturi: css/mytheme.css
• os: <empty>
• ws: <empty>
• os_version: <empty>

The values os, ws and os_version are worth explain. Using those fields allows you to filter out specific operationsystems, windowingsystems, operatingsystem-version.
This feature is used for example by the Eclipse 4.0 workbench to contribute multiple styles with the same id but because the platform filter differs only one of them is really showing ups in the registered themes in the end.

Defining a theme

Let’s use the CSS-Definition for Win7 as a starting point for our themeing:

.MTrimmedWindow { 
    background-color: #E1E6F6; 
    margin-top: 2px;
    margin-bottom: 2px;
    margin-left: 2px;
    margin-right: 2px;
}

.MTrimmedWindow.topLevel { 
    margin-top: 24px;
    margin-bottom: 2px;
    margin-left: 12px;
    margin-right: 12px;
}

.MPartStack {
    tab-renderer: url('platform:/plugin/org.eclipse.e4.ui.workbench.renderers.swt/org.eclipse.e4.ui.workbench.renderers.swt.CTabRendering');
    unselected-tabs-color: #FFFFFF #FFFFFF #FFFFFF 100% 100%;
    outer-keyline-color: #FFFFFF;
	inner-keyline-color: #FFFFFF;
	font-size: 9;
	font-family: 'Segoe UI';
	simple: true;
}

.MTrimBar {
    background-color: #E1E6F6; 
}

.MTrimBar#org-eclipse-ui-main-toolbar {
    background-image:  url(./win7.PNG);	
}

.MPartStack.active {
	unselected-tabs-color: #F3F9FF #D0DFEE #CEDDED #CEDDED #D2E1F0 #D2E1F0 #FFFFFF 20% 45% 60% 70% 100% 100%;
    outer-keyline-color: #B6BCCC;
	inner-keyline-color: #FFFFFF;
}

#PerspectiveSwitcher  {
	background-color: #F5F7FC #E1E6F6 100%;
}

Just copy this to your mytheme.css. If you now launch an Inner Eclipse and open the Appearance-PreferencePage you should be able to select a your “My Custom Theme” and the application in the background will immediatly change its L&F and on my OS-X look like this:

The first thing I we’d like to change is the margin on the main-window which is at least in my eyes a little bit too large. So we modify the margin settings in “MTrimmedWindow.topLevel” to

.MTrimmedWindow.topLevel { 
    margin-top: 12px;
    margin-bottom: 2px;
    margin-left: 5px;
    margin-right: 5px;
}

Next thing we are customizing is the background color of our window which is controlled by .MTrimmedWindow

.MTrimmedWindow { 
    background-color: #293955; 
    /*  */
}

Next on our list is the background of our top-trim (which shows the Toolbar and the perspective switcher) and the left/right trim used to show minized stacks.

.MTrimBar {
    background-color: #405579;
}

.MTrimBar#org-eclipse-ui-main-toolbar {
    background-color: #d9e3f3 rgb(170, 176, 191) 100%;
}

#PerspectiveSwitcher  {
	background-color: #d9e3f3 rgb(170, 176, 191) 100%;
}

The definition of the background-color of the top-trim and the Perspective-Switcher is interesting because we define there a linear gradient.

The final change we make is the background color of the active tabs:

.MPartStack.active {
  unselected-tabs-color: #eef0f3 #ced4df #ced4df #FFFFFF 90% 100% 100%;
  outer-keyline-color: #eef0f3;
  inner-keyline-color: #FFFFFF;
}

When launching our Inner Eclipse the next time it should look like this:

You see you can with some very easy changes influence the L&F of the Eclipse workbench. Still there are some things I haven’t been able to style yet:

• Line drawn between PerspectiveSwitcher and Toolbar
• Items in the StatusBar (I’d like to give them a white foreground-color)
• Background of the ActiveTab – only the unselected tabs are themeable

In the 2nd part of this series we are going to implement our own TabRenderer to customize the L&F of the Tabs even more.

I’ve started a small project named e4themes over at eclipselabs which holds some themes.