Eclipse 4.0 RCP: Dynamic CSS Theme Switching

The css theming capabilities of the Eclipse 4.0 SDK are improving. Especially the mechanism to implement a dynamic theme switcher is much easier now. If you want to implement a css theme switcher, you just need to contribute to the extension point org.eclipse.e4.ui.css.swt.theme. Here is an example from my e4 contacts demo for declaring two themes:

<extension
 point="org.eclipse.e4.ui.css.swt.theme">
 <theme
    basestylesheeturi="css/dark-gradient.css"
    id="org.eclipse.e4.demo.contacts.themes.darkgradient"
    label="Dark Gradient Theme">
 </theme>
 <theme
    basestylesheeturi="css/bright-gradient.css"
    id="org.eclipse.e4.demo.contacts.themes.brightgradient"
    label="Bright Gradient Theme">
 </theme>
</extension>

Then you need to specify a handler that does the actual theme switching. Here is the whole handler code for switching to the dark gradient theme:

public class DarkThemeHandler {

   @Execute
   public void execute(IThemeEngine engine) {
      engine.setTheme("org.eclipse.e4.demo.contacts.themes.darkgradient");
   }
}

Use the workbench model to bind this handler to a menu or tool bar item — that’s it. The two screenshots show the results when dynamically switching between the dark and the bright theme.

Kai
Follow me on Twitter

This Post Has 22 Comments

  1. Lars Vogel

    Great stuff Kai. Thanks also for the reminder to update my tutorial. 🙂

  2. vineet

    hey Kai , Thanx for sharing this information,but i have another problem.Can i have all these things in eclipse3 also instead of e4 only.I have no idea and i want to change my applications theme through css , but on eclipse 3 .its a pure desktop application.

    kai plz help me up.
    thanx in advance

  3. Kai Tödter

    @vineet yes, it is planned to provide at least css theming for 3.x. As soon as I find the time to investigate more, I’ll blog about it.

  4. vineet

    Thanx kai for your feedback.I am waiting for your next feedback.

  5. RR

    Im having NPE:

    !MESSAGE Could not start styling support.
    !STACK 0
    java.lang.NullPointerException: A null service reference is not allowed.
    //long stacktrace 🙂

    Already tried e4 and 3.6 (with e4 bundles). Anybody knows wtat’s the problem ?

  6. Kai Tödter

    @RR,

    make sure that the bundle org.eclipse.equinox.ds and all required bundles are in your launch configuration. This is already filed as bug and will be fixed soon.

  7. RR

    @Kai Tödter

    You were right, there was no org.eclipse.equinox.ds in my launch conf.

    Now im having “java.lang.ClassNotFoundException: org.w3c.css.sac.Parser”, but i have bundle org.w3c.css.sac 1.3.1 in my eclipse ide.

    Bundle added with “New -> Plugin from existing jar archive” with proj name “org.w3c.css.sac”. Any solutions ?

  8. RR

    the problem occurs when i try to use thememanager in Eclipse 3.6 (havent tried with e4 yet)

  9. mirkata

    @RR
    I have managed to make CSS and the theme engine work on RCP application build with Eclipse 3.6 Helios. It’s just a question of finding out the right plug-ins and include them to your runtime target. Works fine but I find it personally quite limited.

  10. Andy

    Hi kai i need to find css styles for eclipse 4, like black.

  11. siddu

    Hello Kai,

    Thank you for the nice Blog.

    Is there any support for CSS in e3.x.?

    1. Kai Tödter

      I don’t think so, but I haven’t worked with Eclipse RCP for years. So may be someone did a back port.

Leave a Reply

I accept the Privacy Policy