Styling the todo application

10.1. Create stylesheet

We first create the css file and then demonstrate both possible ways to use the css file. Create the folder "css" in your application and create the following file "default.css".

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

Composite Label {
 color: black;
}


Text {
 font: Verdana 8px;
}

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

SashForm {
 background-color: #c1d5ef;
}


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

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

   

10.2. Use css via property at startup

Add the property "applicationCSS" with the value "platform:/plugin/de.vogella.e4.todo/css/default.css"to your application in extension point "org.eclipse.core.runtime.products". This property points to the css file.

Run your application it should look like the following.

10.3. Theme Manager and switching styles

Remove the "applicationCSS" property again and create two extension for extension point "org.eclipse.e4.ui.css.swt.theme".

Add the "cssTheme" parameter to your product.

    
package de.vogella.e4.todo.handler;

import javax.inject.Named;

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


public class ThemeSwitchHandler {
 @Execute
 public void switchTheme(IThemeEngine engine) {
  engine.setTheme("de.vogella.e4.todo.redtheme", true);
 }
}

   

Create the following file "css/red.css".

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


   

Add the menu entry to your application.

If you run your application you should be able to select the "Themes" and switch your application to a red style.