Eclipse 4.2 Juno CSS

Question

I'm trying to simply update the look and feel of Eclipse Juno 4.2 via CSS stylesheets. There are a couple of tutorials I've seen, and a stackoverflow question:

I've installed the CSS spy tool, but this only lets me make temporary changes. Sigh. I've gone into the org.eclipse.platform_4.2.0.v201206081400 plugin folder, and mucked around with the plugin.xml, but none of the changes I make there have any effects (even after a restart).

How do I create a new theme and apply it WITHOUT creating, compiling and installing an entire eclipse plugin project to my local environment? Or, even better, can I just modify an existing theme?

From my knowledge, I'm fairly certain you are required to use a plugin to achieve this in 4.0+. See: http://www.vogella.com/blog/2012/07/11/eclipse-4-is-beautiful-create-your-own-eclipse-4-theme/ and http://stackoverflow.com/questions/6937825/how-can-i-change-eclipse-theme — Justin Skiles, Aug 09 '12 at 18:59

Eldar Abusalimov · Accepted Answer · 2012-08-13T12:59:27.733

Here is how I got it working.

Using a plugin

I have downloaded Eclipse UI Themes plugin as described here (direct link to an archive). But instead of extracting it into dropins directory, I extracted it into plugins. Also I changed its permissions to allow everyone to modify its files.

At this point you have:

plugins/com.github.eclipsecolortheme.themes_1.0.0.201207121019/
├── com
│   └── github
│       └── eclipsecolortheme
│           └── themes
│               └── Activator.class
├── META-INF
│   └── MANIFEST.MF
├── plugin.xml
└── themes
    └── css
        └── juno.css

juno.css file is what you want. After launching Eclipse, this theme will be available under Appearance -> Dark Juno.

Without a plugin

After looking into plugin.xml, I had an idea how to create a new theme without using any plugin.

<?xml version="1.0" encoding="UTF-8"?>
<?eclipse version="3.4"?>
<plugin>
   <extension
         point="org.eclipse.e4.ui.css.swt.theme">
      <theme
            basestylesheeturi="themes/css/juno.css"
            id="com.github.eclipsecolortheme.themes.darkjuno"
            label="Dark Juno">
      </theme>
   </extension>
</plugin>

One can add org.eclipse.e4.ui.css.swt.theme extension point to an existing plugin, say org.eclipse.platform_4.2.0.v201206081400. Moreover, its plugin.xml already have this extension point, and the only thing you have to do is to add an appropriate theme. Please note, that it must have a unique id.

      <theme
            basestylesheeturi="css/my_theme.css"
            id="org.eclipse.e4.ui.css.theme.my_theme"
            label="My Theme Name">
      </theme>

A new CSS file can be placed into the css directory, which already contains the default set of themes.

org.eclipse.platform_4.2.0.v201206081400/
├── ...
├── css
│   ├── e4_basestyle.css
│   ├── e4_classic_win7.css
│   ├── e4_classic_winxp.css
│   ├── e4_default.css
│   ├── e4_default_gtk.css
│   └── ...
├── images
│   ├── gtkGrey.png
│   ├── gtkHandleDark.png
│   ├── gtkHandle.png
│   ├── gtkTSFrameDark.png
│   ├── gtkTSFrame.png
│   └── ...
├── META-INF
│   ├── eclipse.inf
│   ├── ECLIPSE_.RSA
│   ├── ECLIPSE_.SF
│   └── MANIFEST.MF
├── platform.jar
├── plugin.properties
├── plugin.xml
└── ...

After restarting Eclipse with -clean option you will see a newly created item in the list of all themes: The newly registered theme

UPD. 1

For my installation it seems that changes to CSS apply on Eclipse restarting (File -> Restart, or just quitting and starting it manually).

The only weird behavior I have noticed is that CSS files from ~/.e4css directory (if any exists) override thus ones from the plugin directory. I'm not sure where it comes from, but I can safely remove any files from it. I also don't know this directory even exists on non-Linux systems, but if it does, I guess it should be located somewhere in a home directory of the user, or maybe in Documents.

UPD. 2

I just tried to add a new theme from scratch and noticed that there was a small mistake in the XML above. In order to get a new theme properly registered it must have a unique id attribute. Otherwise you will get an error:

java.lang.IllegalArgumentException: A theme with the id 'org.eclipse.e4.ui.css.theme.e4_default' is already registered
    at org.eclipse.e4.ui.css.swt.internal.theme.ThemeEngine.registerTheme(ThemeEngine.java:186)
    ...

And it seems that I were not right saying just restarting Eclipse to register a new theme is enough. However, eclipse -clean does the trick.

And while I'm able to get the changes to appear from the CSS files finally, I never seem to be able to get the labels to appear. Are you seeing your own custom themes that you added? — cgp, Aug 13 '12 at 12:03
@altCognito, oops, when trying to reproduce the steps from the beginning, I found a bug in the `` XML. Please see the updated answer. — Eldar Abusalimov, Aug 13 '12 at 13:01
Yeah, that was it. Odd that changing the ID fixes the issue since there are other themes with conflicting IDs, but once I changed the ID and restarted with the -clean option, everything cleared up. Thank you. — cgp, Aug 13 '12 at 16:34
Answer selected, thanks to you both, but I have to pick one, and the extra detail and follow up are always appreciated. — cgp, Aug 13 '12 at 16:34
@altCognito, you're welcome. About the ID uniqueness: I've noticed it too, but all of these themes that have the same ID, specify different `os` attribute. Most likely it is used to load an appropriate theme depending on the underlying system. — Eldar Abusalimov, Aug 13 '12 at 16:41
I have tried the "Without a plugin" method on Xubuntu 12.04. I added the theme to the extension point (and changed the basestylesheeturi to "css/juno.css"), copied the file juno.css into the eclipse to ${ECLIPSE_HOME}/plugins/org.eclipse.platform_4.2.2.v201302041200/css, but when I select "Dark Juno", it's not dark. What did I miss ? — Markus N., Mar 29 '13 at 01:58
Yes, I did. Sorry I forgot to mention that in my previous post. — Markus N., Mar 29 '13 at 18:33
@Markus, I'm afraid I can't recall now all the issues, neither I have Eclipse installed (I switched to Sublime Text). Sorry. =( — Eldar Abusalimov, Mar 29 '13 at 19:17

score 3 · Answer 2 · answered Aug 10 '12 at 10:38

3

Launch eclipse with -clean option from command line after you have made changes in css files. Changes are not reflected otherwise. (Alternatively have a look at http://eclipsecolorthemes.org/)

answered Aug 10 '12 at 10:38

codejammer

1,636
1
14
27

I've used Eclipse color themes, but maybe I missed something? Doesn't it only effect the editor? – cgp Aug 10 '12 at 13:43
Didn't launching with -clean after editing the css files in org.eclipse.platform work? It worked for me. Didn't know color themes was editor only. – codejammer Aug 11 '12 at 00:48
Clean does reload the css files. I've got to try out some of the above, but I think the -clean was the crux of why I didn't see any of my changes. – cgp Aug 12 '12 at 01:14
@altCognito I have added a few words about applying the changes in my answer above. In my case, just restarting Eclipse is enough. – Eldar Abusalimov Aug 12 '12 at 12:02

Eclipse 4.2 Juno CSS

2 Answers2

Using a plugin

Without a plugin

UPD. 1

UPD. 2