Eclipse 4.0 RCP: Dynamic CSS Theme Switching

22

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

22 Comments

  1. Kai's Blog » Eclipse 4.0 RCP: Dynamic CSS Theme Switching | My Blog06-09-2010

    […] here: Kai's Blog » Eclipse 4.0 RCP: Dynamic CSS Theme Switching This entry was posted on Wednesday, June 9th, 2010 at 4:29 am and is filed under Uncategorized. […]

  2. Kai's Blog » Eclipse 4.0 RCP: Dynamic CSS Theme Switching | My Blog06-09-2010

    […] here: Kai's Blog » Eclipse 4.0 RCP: Dynamic CSS Theme Switching This entry was posted on Wednesday, June 9th, 2010 at 4:29 am and is filed under Uncategorized. […]

  3. Kai's Blog » Eclipse 4.0 RCP: Dynamic CSS Theme Switching | My Blog06-09-2010

    […] here: Kai's Blog » Eclipse 4.0 RCP: Dynamic CSS Theme Switching This entry was posted on Wednesday, June 9th, 2010 at 4:29 am and is filed under Uncategorized. […]

  4. Kai's Blog » Eclipse 4.0 RCP: Dynamic CSS Theme Switching | My Blog06-09-2010

    […] here: Kai's Blog » Eclipse 4.0 RCP: Dynamic CSS Theme Switching This entry was posted on Wednesday, June 9th, 2010 at 4:29 am and is filed under Uncategorized. […]

  5. Kai's Blog » Eclipse 4.0 RCP: Dynamic CSS Theme Switching | CSS Guru How to CSS06-09-2010

    […] more from the original source: Kai's Blog » Eclipse 4.0 RCP: Dynamic CSS Theme Switching Share and […]

  6. Kai's Blog » Eclipse 4.0 RCP: Dynamic CSS Theme Switching | CSS Guru How to CSS06-09-2010

    […] more from the original source: Kai's Blog » Eclipse 4.0 RCP: Dynamic CSS Theme Switching Share and […]

  7. Kai's Blog » Eclipse 4.0 RCP: Dynamic CSS Theme Switching | CSS Guru How to CSS06-09-2010

    […] more from the original source: Kai's Blog » Eclipse 4.0 RCP: Dynamic CSS Theme Switching Share and […]

  8. Kai's Blog » Eclipse 4.0 RCP: Dynamic CSS Theme Switching | CSS Guru How to CSS06-09-2010

    […] more from the original source: Kai's Blog » Eclipse 4.0 RCP: Dynamic CSS Theme Switching Share and […]

  9. Lars Vogel06-13-2010

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

  10. Eclipse 3.6 styling with CSS and the ThemeManager » Eclipse Papercuts06-15-2010

    […] and the ThemeManager No Comments   by Lars Vogel / June 15th, 2010 Tom Schindl and Kai Tödter already blogged about the new Eclipse e4 ThemeManager. If you want to use the Eclipse ThemeManager […]

  11. vineet07-08-2010

    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

  12. Kai Tödter07-08-2010

    @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.

  13. vineet07-09-2010

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

  14. RR07-22-2010

    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 ?

  15. Kai Tödter07-22-2010

    @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.

  16. RR07-23-2010

    @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 ?

  17. RR07-23-2010

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

  18. mirkata08-30-2010

    @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.

  19. Andy02-21-2013

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

  20. How can I change Eclipse theme? - QuestionFocus11-29-2017

    […] Eclipse 4 will provide much advance theme options: See “Eclipse 4.0 – So you can theme me Part 1” and “Eclipse 4.0 RCP: Dynamic CSS Theme Switching“. […]

  21. siddu03-20-2018

    Hello Kai,

    Thank you for the nice Blog.

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

    • Kai Tödter03-21-2018

      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