Ubuntu + Eclipse 4.2 - Dark theme - How to darken sidebar backgrounds?

Question

Due to spending 24/7 programming in front of a computer screen (job, thesis), it's beneficial to view dark colours as much as possible.

Ubuntu's Ambiance theme can be neatly enhanced using Solancer's customisations, and Eclipse Juno looks mostly consistent after applying Roger Dudler's dark Juno theme.

However, there is a problem with using a dark Juno theme like Dudler's. The background colour of (in)active elements within Package Explorer, Project Explorer and other Eclipse views displays white/grey colours that are not only inconsistent, but actually obscures important display components like expansion arrows.

After much googling, it seems such colours are inherited from the OS, and therefore cannot be changed from within Eclipse Preferences. I'd hoped that the dark GTK 3 / Unity theme (Solancer's Ambiance) would supply the necessary dark colours, but this is not the case.

I've used sed to replace all predefined colours in all the .css files under /opt/eclipse/plugins/org.eclipse.platform_4.2.0.v*/css with #FF0000 to establish whether any colours defined there affect the white/grey problem colours; sadly they do not.

Having seen mention of a ~/.e4css folder online which may contain overriding CSS definitions for such properties, I sought the folder on my local machine, only to find it does not exist.

Similar questions to this exist on SO, yet none explicitly specify how to "fix" these colours.

My question is simple: is there a GTK+ 3.0 CSS property (group) that can be defined to specify these colours for Eclipse 4.x, and where should it be configured?

Answer 1

Finally found the solution through searching GTK configuration files manually myself.

It turns out Eclipse uses GTK+ 2.0 .

If you install a custom GTK theme in Ubuntu (all are compatible with Unity too) you'll extract the theme folder into ~/.themes.

GTK+ 3.0 is configured via css, e.g. ~/.themes/YourTheme/gtk-3.0/gtk.css

GTK+ 2.0 is configured via an rc file, e.g. ~/.themes/YourTheme/gtk-2.0/gtkrc

Most GTK+ 3.0 themes contain both of these configuration folders due to many applications being GTK+ 2.0 specific.

The leading line in the GTK+ 2.0 gtkrc file contains fundamental foreground and background colours; these are what must be changed.

To modify the selected, active element bg colour in Eclipse views you must change colour base_color. To modify the unselected element bg colour, you must change selected_bg_color. Font colour is changed with the equivalent fg_color properties (in the case of base_color this is simply 'fg_color').

Bear in mind this will affect all GTK applications, so you may need to tweak according to personal taste. Also note that you must reload the active GTK theme and restart Eclipse to see changes in effect. The quickest way to do this is to sudo apt-get install myunity, launch and leave it open while you restart Eclipse during colour changes, and select another theme followed by your desired theme each time you wish to load your gtkrc changes.

The original gtkrc leading line in my active GTK theme read:

gtk-color-scheme = "base_color:#ffffff\nfg_color:#4c4c4c\ntooltip_fg_color:#ffffff\nselected_bg_color:#f07746\nselected_fg_color:#FFFFFF\ntext_color:#3C3C3C\nbg_color:#F2F1F0\ntooltip_bg_color:#000000\nlink_color:#DD4814" 

After much experimentation I settled on this replacement configuration:

gtk-color-scheme = "base_color:#555555\nfg_color:#000000\ntooltip_fg_color:#999999\nselected_bg_color:#666666\nselected_fg_color:#ffffff\ntext_color:#000000\nbg_color:#333333\ntooltip_bg_color:#000000\nlink_color:#DD4814" 

The change across the entire OS is very pleasing! Here's how Eclipse looks now, no obscuring this time:

Hope you like the new look :)

P.S. As you'd predict, the process for Netbeans is equivalent.

UPDATE

This is supplementary info, the above process is still correct when using a custom theme such as Dudler's.

After further experimentation it's now clear why editing /opt/eclipse/plugins/org.eclipse.platform_4.2.0.v*/css/*.css didn't have any effect:

Let's say you're editing e4_default_gtk.css in that location - the effects of changed styles in that file will only apply when you select GTK in Window -> Preferences -> Appearance -> [Theme].

You can relate the themes listed in this dropdown, along with your Operating System, to the names of the .css files in the aforementioned filesystem location.