Ubuntu + Eclipse 4.2 - Dark theme - How to darken

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

If you don't want to change the look of the entire desktop you can launch a separate GTK+ theme for Eclipse by setting GTK2_RC_FILES flag in the command to start Eclipse.

Example:

GTK2_RC_FILES=/path/to/gtk/theme/gtkrc /opt/eclipse/eclipse

That means that you can create a copy of your GTK+ theme and tweak it for Eclipse without effecting any other part of your desktop.

Answer 2

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.

Answer 3

For Eclipse 4.5: 1. Create a file like the inserted snippet 2. Save it as "/usr/share/themes/..used theme../gtk-3.0/apps/eclipse.css" 3. Include it "/usr/share/themes/..used theme../gtk-3.0/gtk-main.css"

@define-color ecl_scrollbutton_color #7C7C7C;
@define-color ecl_scrollbutton_color_hover #FB7A00;
 
.scrollbar,
.scrollbar.vertical {
    -GtkScrollbar-has-backward-stepper: 0;
    -GtkScrollbar-has-forward-stepper: 0;
    -GtkRange-slider-width: 14;

    border-radius: 20px;

    border-image: none;
}

/*.scrollbar.trough,
.scrollbar.trough.vertical {
}
*/
.scrollbar.slider,
.scrollbar.slider.horizontal,
.scrollbar.slider.vertical,
.scrollbar.button,
.scrollbar.button.horizontal,
.scrollbar.button.vertical {
    border-width: 0.5px;
    border-style: solid;
    border-color: shade (@ecl_scrollbutton_color, 0.66);
    background-image: -gtk-gradient (linear, left top, right top,
                                     from (shade (@ecl_scrollbutton_color, 1)),
                                     color-stop (0.5, @ecl_scrollbutton_color),
                                     to (shade (@ecl_scrollbutton_color, 1)));
    box-shadow: inset 1px 0 shade (@bg_color, 1.1),
                inset -1px 0 shade (@bg_color, 1.01),
                inset 0 1px shade (@bg_color, 1.1),
                inset 0 -1px shade (@bg_color, 1.1);
}

.scrollbar.slider:hover,
.scrollbar.slider.vertical:hover,
.scrollbar.slider.horizontal:hover {
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@ecl_scrollbutton_color_hover, 1)),
                                     color-stop (0.5, @ecl_scrollbutton_color_hover),
                                     to (shade (@ecl_scrollbutton_color_hover, 1)));
    box-shadow: inset 1px 0 shade (@bg_color, 1.1),
                inset -1px 0 shade (@bg_color, 1.1),
                inset 0 1px shade (@bg_color, 1.1),
                inset 0 -1px shade (@bg_colo

Answer 4

You finally don't need to change your GTK theme to have a dark Package Explorer or Project Explorer etc. windows. Try the solution posted here, for me it works well both on Ubuntu and Windows without changing system theme.

Answer 5

Even in 2013, some items still can not be 'themed', and not only in Eclipse IDE. Only way to fight with color hardcoders (people who define item color via constant, not via theme parameter) is Compiz Color Filter. I develop such filter which preserve colours while inverting. So no problem with any software anymore.

Unfortunately, color filtering will not work on latest Ubuntu's as i know.

Please read more here http://ubuntuforums.org/showthread.php?t=1419702&page=3

!!ARBfp1.0
TEMP temp, neg, YPbPr;
TEX temp, fragment.texcoord[0], texture[0], RECT;
RCP neg.a, temp.a;
MAD temp.rgb, -neg.a, temp, 1.0;
MUL temp.rgb, temp.a, temp;
MUL temp, fragment.color, temp;
DP3 YPbPr.x, temp, {0.333, 0.333, 0.333, 1};
SUB YPbPr.y, YPbPr.x, temp.b;
SUB YPbPr.z, YPbPr.x, temp.r;
ADD temp.r, YPbPr.x, YPbPr.z; 
ADD temp.b, YPbPr.x, YPbPr.y;
SUB temp.g, YPbPr.x, YPbPr.z; 
SUB temp.g, temp.g, YPbPr.y;

MOV result.color, temp;
END

# DO NOT MOVE LINE #2 (TEMP...) below, i.e. do not insert comments before it!
# do not insert comments before 'END' token: SOMETIMES not work!

# replace file /usr/share/compiz/filters/negative with this file.

#  Color filter: negative, but preserve colours. Tested on Ubuntu LTS 10.04.

# compiled from [1], [2] by [e-mail], www.bdyssh.ru
# [1] http://hronir.blogspot.com/2008/09/compiz-fusion-color-filter-for-hue.html
# [2] http://ubuntuforums.org/showthread.php?t=1419702

# add to line 15:  MUL temp.b, 0.5, temp.b;  - for warm/melatonine colors, or 
#  MUL temp.g, 0.5, temp.g;  - for cold colors.