You can configure the visual appearance of your Eclipse RCP application. For example you can set the background color of your parts or the text size used for Label widgets. This configuration can be via a CSS file.

In this CSS file you use selectors and style rules. Selectors are identifiers, which relate to widgets or other elements, for example predefined pseudo classes.

The styling is similar to the CSS 2.1 standard. Non-standard properties are prefixed with either swt- or eclipse-.

The following code shows a CSS file which defines an example styling for an Eclipse application.

Label {
  font: Verdana 8px;
  color: black;
}

Composite Label {
  color: black;
}

Text {
  font: Verdana 8px;
}

/* Identifies only those SWT Text elements 
   appearing within a Composite */

Composite Text {
  background-color: white;  
  color: black;
}

SashForm {
  background-color: #c1d5ef;
}


/* background uses a gradient */

.MTrimBar {

  background-color: #e3efff #c1d5ef;
  color: white;
  font: Verdana 8px;
}

Shell {
    background-color: #e3efff #c1d5ef 60%;
}

CTabItem, ToolBar, Button, CBanner, CoolBar {
  font-size: 9;
  background-color: #e3efff;
} 

To define the styling for your application, you have two options:

SWT currently has some limitations for styling. For example it is not possible to style menus and table headers. In addition some platforms do not allow the styling of certain widgets, e.g. the Button or the ScrollBar widget.

The CSS attributes for SWT which can be styled are listed under the following link:

http://wiki.eclipse.org/E4/CSS/SWT_Mapping 

Eclipse application model elements, e.g. MPartStack or MPart can also be styled. The CSS selectors are based on the Java classes for example the following:

For example you could hide the minimize and maximize button of a MPartStack via the following CSS rule.

.MPartStack {
  swt-maximize-visible: false;
  swt-minimize-visible: false;
} 

Eclipse supports also certain CSS pseudo classes for example the following.

You can specify tags on widgets in your source code and use these tags in your CSS file to style these widgets. You can specify an ID or a class. In CSS an ID is supposed to be unique across all of the elements in a page (or window in our case) while a class can be assigned to several elements.

The following example shows how to set the ID and the class for specific SWT widgets.

// IStylingEngine is injected
@Inject IStylingEngine engine;

// More code....

Label label = new Label(parent, SWT.NONE);
Text text = new Text(parent, SWT.BORDER);

// Set the ID, must be unique in the same window
engine.setID(label, "MyCSSTagForLabel"); 

// Set the class, can be used several times
engine.setClassname(text, "error"); 

These elements can be addressed in the CSS file via:

#MyCSSTagForLabel{
  color:#blue;
}

.error { 
  border: 1px red; 
} 

Colors can be defined in different ways, e.g. the color white can be described as #white, rgb(255,255,2555) or #ffffff.

Styling supports gradients for the background color of UI controls. Linear and radial gradients are supported. The definition of gradients is demonstrated in the following listing.

// linear gradient
background-color: gradient linear color_1 [color_2]* [percentage]*

// For example
background-color: gradient linear white black 
background-color: gradient linear white black blue
background-color: gradient linear white black 50%
background-color: gradient linear white black 50% 20%

// radial gradient
background-color: gradient linear color_1 color_2 [percentage]

// For example
background-color: gradient radial white black
background-color: gradient radial white black 50% 

If you use the optional percentage in the definition, then the color change will be done after the defined percentage. The following picture shows the result of different settings.

Please note that the current gradient specification is not compliant with the CSS specification and that it is planned to change this definition (after the Eclipse 4.2 release).

It is also possible to implement CSS support for custom widgets. See the Eclipse 4 CSS Wiki for further details description. This can be found under the following URL.

http://wiki.eclipse.org/Eclipse4/RCP/CSS 

CSS spy is a very useful tool to see the possible styling options. CSS spy is part of the e4 tooling project and can be installed from its update site. See the Eclipse 4 installation description for details.

You can open the CSS spy via the Shift+Alt+F5 shortcut.

CSS spy allows you to see the available properties and the current style settings.

The CSS Scratchpad allows to change CSS rules interactively. is also part of the e4 tooling project.

You open it via the Ctrl+Shift+Alt+F6 shortcut.

If you click the Apply button, the entered CSS will be applied at runtime.

Create a folder called css in your com.example.e4.rcp.todo project and create the following default.css file.

Label {
  font: Verdana 8px;
  color: black;
}

Composite Label {
  color: black;
}

Text {
  font: Verdana 8px;
}

/* Identifies only those SWT Text elements 
   appearing within a Composite */

Composite Text {
  background-color: white;  
  color: black;
}

SashForm {
  background-color: #c1d5ef;
}


/* background uses a gradient */

.MTrimBar {

  background-color: #e3efff #c1d5ef;
  color: white;
  font: Verdana 8px;
}

Shell {
    background-color: #e3efff #c1d5ef 60%;
}

CTabItem, ToolBar, Button, CBanner, CoolBar {
  font-size: 9;
  background-color: #e3efff;
} 

Open the plugin.xml file in your com.example.e4.rcp.todo plug-in. Select the Extensions tab.

Right-click on your product and select New → property.

Add the applicationCSS property to the org.eclipse.core.runtime.products extension. The value of this property should use the following identifier.

platform:/plugin/com.example.e4.rcp.todo/css/default.css 

Start your application. The application should be styled.

The following exercises assumes that you already implemented CSS support for your application based on the last exercise.

You will now use the Theme Manager to introduce the ability to switch the application styling at runtime.

Add the org.eclipse.e4.ui.css.swt.theme as dependency to your todo application plug-in.

Create the following css/red.css file.

CTabItem, ToolBar, Button, CBanner, CoolBar {
  font-size: 9;
  background-color: red;
} 

Remove the applicationCSS property from your product extension.

The theme engines uses extension which you can define in your plugin.xml file.

Select the Extensions tab in the editor for the plugin.xml file and create two org.eclipse.e4.ui.css.swt.theme extensions.

You create an extension in the Extensions tab by pressing the Add button.

Right mouse click on the org.eclipse.e4.ui.css.swt.theme extension to create a new theme. The following screenshots show the extensions which you should create.

The relevant part in the plugin.xml file should look like the following.

<extension
         point="org.eclipse.e4.ui.css.swt.theme">
      <theme
            basestylesheeturi="css/default.css"
            id="com.vogella.e4.todo.defaulttheme"
            label="Default Theme">
      </theme>
      <theme
            basestylesheeturi="css/red.css"
            id="com.vogella.e4.todo.redtheme"
            label="Red Theme">
      </theme>
 </extension> 

After adding the two extensions add the cssTheme property to your product pointing to one of the themes you created.

Create a new handler class, which allows you to switch between the themes.

package com.example.e4.rcp.todo.handlers;

import org.eclipse.e4.core.di.annotations.Execute;
import org.eclipse.e4.ui.css.swt.theme.IThemeEngine;

public class ThemeSwitchHandler {
  // Remember the state
  static boolean defaulttheme= true;
  @Execute
  public void switchTheme(IThemeEngine engine) {
    System.out.println("ThemeSwitchHandler called");
    // The last argument controls
    // whether the change should be persisted and
    // restored on restart
    if (!defaulttheme) {
      engine.setTheme("com.vogella.e4.todo.defaulttheme", true);
      
    } else {
      engine.setTheme("com.vogella.e4.todo.redtheme", true);
    }
    defaulttheme= !defaulttheme;
  }
} 

Define a new command and a handler for switching the style. Assign the above class to the handler.

Add a menu entry to your application model which uses your handler for switching the style.

If you run the application and select your new menu entry, the styling of your application should use the red color similarly to the following screenshot.

Source Code of Examples

Eclipse Wiki for CSS attributes

vogella Training Android and Eclipse Training from the vogella team

Android Tutorial Introduction to Android Programming

GWT Tutorial Program in Java and compile to JavaScript and HTML

Eclipse RCP Tutorial Create native applications in Java

JUnit Tutorial Test your application

Git Tutorial Put everything you have under distributed version control system