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 BlogJune 9, 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 BlogJune 9, 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 BlogJune 9, 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 BlogJune 9, 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 CSSJune 9, 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 CSSJune 9, 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 CSSJune 9, 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 CSSJune 9, 2010

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

  9. Lars VogelJune 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 PapercutsJune 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. vineetJuly 8, 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ödterJuly 8, 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. vineetJuly 9, 2010

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

  14. RRJuly 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ödterJuly 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. RRJuly 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. RRJuly 23, 2010

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

  18. mirkataAugust 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. AndyFebruary 21, 2013

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

  20. How can I change Eclipse theme? - QuestionFocusNovember 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. sidduMarch 20, 2018

    Hello Kai,

    Thank you for the nice Blog.

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

    • Kai TödterMarch 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