Eclipse 4 ships with a theme manager which can be used to swap between themes (in essence, separate CSS files). The theme manager is available for inclusion in Eclipse 4-based applications by adding the org.eclipse.e4.ui.css.swt plug-in as a dependency to the application, and by adding one or more org.eclipse.e4.ui.css.swt.theme extension points.
- Add the
org.eclipse.e4.ui.css.swt.themeplug-in to the Dependencies tab of theplugin.xmlfile of thecom.packtpub.e4.applicationproject. - Go to the plugin.xml tab of the
plugin.xmlfile (or edit the file as text) and add the following content to add blue and green themes:<extension point="org.eclipse.e4.ui.css.swt.theme"> <theme label="Blue Theme" id="com.packtpub.e4.ui.css.theme.blue" basestylesheeturi="css/blue.css"/> <theme label="Green Theme" id="com.packtpub.e4.ui.css.theme.green" basestylesheeturi="css/green.css"/> </extension> - Create a text file with the name
blue.cssin thecssfolder of the project with the following content:.MPart { background-color: blue; } - Create another text file
green.cssin thecssfolder, substituting the background color forgreeninstead ofblue. - In the
plugin.xmlfile, comment or remove theapplicationCSSproperty from the product extension and replace it with a propertycssThemewith the ID of the initial theme:<property name="cssTheme" value="com.packtpub.e4.ui.css.theme.blue"/> <!-- property name="applicationCSS" value="platform:/plugin/com.packtpub.e4.application/css/default.css" -->
- The extensions tab will look like this:
- Run the application and the default theme should be displayed. Test that it works by changing the
cssThemeto point to the green theme (com.packtpub.e4.ui.css.theme.green) instead.
Two different CSS files were added to the product, and defined as themes, each with their own label and ID. Each theme can have its own definitions, and the themes can use @import (describe in earlier sections of this chapter) to include the content of another style file.
Instead of passing a CSS to the product when it launches, the theme identifier can be used. This permits the style to be refactored or the CSS file to be renamed at a later stage without affecting any existing products. In addition, it is possible to use the themes to dynamically switch the style of the runtime, as is shown in the next section.