Big warning: this was not maintained, and I didn’t use it in a long time (2-3 Eclipse releases?) At this point I would rather recommend using the default Dark Theme in Eclipse. That’s what I use :-)
For quite a while I wanted a dark theme for Eclipse, and I have looked for one.
And although I have seen various pages addressing various parts of this, I have not been able to find a place where everything is put together in a set of easy to follow steps.
So here it is.
Summary
- Install “ Eclipse Color Theme” and
“ Eclipse 4 Chrome Theme” - Configure “Eclipse Color Theme”
- Configure “Eclipse 4 Chrome Theme”
- Download DarkEclipseTheme.zip
- Unpack it in
<EclipsePath>/configuration - Change “General” — “Appearance” theme to “Jeeeyul’s themes - Chrome Theme”
- Select “Dark Eclipse” from “User’s presets” select
- Change the console background and foreground
- Ubuntu: change
/usr/share/themes/Ambiance/gtk-2.0/gtkrc
(tooltip_fg_color,tooltip_bg_color,
"tooltips" ... bg[SELECTED])
And that will take us from this
to this
Cross-platform locations in Eclipse
“Preferences” dialog
Windows, Linux: “Window” — “Preferences”
Mac OS X: “Eclipse” — “Preferences”
“About” dialog
Windows, Linux: “Help” — “About Eclipse”
Mac OS X: “Eclipse” — “About Eclipse”
Install plugins
For this you will need two plugins: “Eclipse Color Theme” and “Eclipse 4 Chrome Theme”
From the Eclipse Marketplace
- Go to “Help” — “Eclipse Marketplace…”
- In the “Search” tab search for “color theme” (no quotes)
- Install “Eclipse Color Theme” and “Eclipse 4 Chrome Theme”
(you can click “Install” on one of them, then click “Install More” in the new dialog to
install them both at once and save some time)
From “Install New Software…” — “Add”
If for some reason you don’t have access to the “Eclipse Marketplace…” from Eclipse, you can go directly to “ Eclipse Color Theme” and “ Eclipse 4 Chrome Theme”.
Click the “Update Site” icon (green down pointing arrow), and that will give you the URL to use.
I will not describe here detail how to do it, the short version is: “Help” — “Install New Software…” — “Add…”, and add the URL you got from Marketplace.
Configure plugins
“Eclipse Color Theme” settings
This is used to change the color for all the documents, but but not the “chrome” of Eclipse (dialogs, toolbars, etc.)
It is ready to use “out of the box”, so you can go to the “Preferences” dialog, then “General” — “Appearance” — “Color theme” and select “something dark”. I went with “Monkai”.
“Eclipse 4 Chrome Theme” settings
This plugin will take care of the UI itself, but needs some more tweaking.
If you don’t know your Eclipse location: go to the “About” dialog,
then click “Installation Details” and go to the “Configuration” tab (the last one).
From there write down or copy / paste in some text file the path to the Eclipse executable.
From now on I will refer to that path as <EclipsePath>.
Download DarkEclipseTheme.zip, unpack it (preserving paths), and copy it in the <EclipsePath>/configuration. You should end up with a file named <EclipsePath>/configuration/net.jeeeyul.eclipse.themes/user-presets.xml
Now, in Eclipse again, go to the “Preferences” dialog, then “General” — “Appearance”, change the Theme to “Jeeeyul’s themes - Chrome Theme”, “OK” and CLOSE Eclipse (close and not restart, because we need to tinker a bit under the hood).
Back in Eclipse, in the “Preferences” dialog, go to “General” — “Appearance” — “Chrome Theme”, click the from the “Preset” drop-down arrow (see screen-shot) and from “User’s presets” select “Dark Eclipse” (the last option).
This is why we added the user-presets.xml in the step below: the plugin comes with some predefined themes, but they are all very light (and some of them pink :-)
Click “OK” and voila, all is dark now!
The theme is modeled to work well with Monkai, but it is probably OK for most of the other dark document themes.
Some more tweaks
The console
It all looks good, until you run something. And then you notice that the console is white.
To fix that you go back to the “Preferences” dialog and from “Run / Debug” — “Console” change the “Background color” to #303030 (Windows and Mac: 48, 48, 48) and the “Standard Out text color” to #e5e5e5 (Windows and Mac: 229, 229, 229)
(on Windows you will have to click “Define Custom Colors” to expand the dialog to the “advanced” form.
Now things look pretty good.
And if you are on Windows on Mac OS X, you are done!
Ubuntu tooltips
It all looks nice, until you have a problem and try to fix it using quick-fix, or you get to a help topic with links. You will then notice that the links are dark-on-dark and difficult to read.
This is a know problem, and you will find several solution if you search for “ubuntu eclipse dark” (no quotes).
Instead of installing I don’t know what third-party tools, I have solved it using brute force:
cd /usr/share/themes
sudo cp -R Ambiance Ambiance_org
sudo vi Ambiance/gtk-2.0/gtkrc
In the first line I have changed tooltip_fg_color and tooltip_bg_color:
gtk-color-scheme = "base_color:#ffffff\nfg_color:#4c4c4c\ntooltip_fg_color:#ffffff\nselected_bg_color:#f07746\n
selected_fg_color:#FFFFFF\ntext_color:#3C3C3C\nbg_color:#F2F1F0\ntooltip_bg_color:#303030\nlink_color:#DD4814"
And in the tooltips section (line 504 for me, but that might be different) I have changed bg[SELECTED]:
style "tooltips" {
xthickness = 4
ythickness = 4
bg[NORMAL] = @tooltip_bg_color
fg[NORMAL] = @tooltip_fg_color
bg[SELECTED] = @tooltip_bg_color
engine "murrine" {
rgba = TRUE
}
}
I have found these values to work pretty nicely with this dark theme, and without negative side-effects for other applications.
Now go to Ubuntu main “Menu” — “Preferences” — “Appearance” and change the theme to something else, then back to “Ambiance”.
You need to restart Eclipse, but this is it, you are done.
Final notes
I have found the above settings to work nicely on Windows 7, Mac OS X, Ubuntu, and Fedora, with Eclipse 4.3 and 4.2.
And I have tweaked the theme to fix all the problems I have found, and seems to work pretty well now.
But if you notice any problems you can either comment here, or fix it yourself.
My fixes ended up in the “Preferences” dialog, “General” — “Appearance” — “Chrome Theme”, the “CSS” tab.
To find out what to fix I used the “ E4 CSS Editor” and “ E4 CSS Spy” plugins.
These tools will help you find out what each widget is (the “Spy” part) and temporarily tinker with the styles (the “Editor” part).
Enjoy!
Bonus / self-promotion :-)
Maybe you’we noticed that in the screen-shoot of the Dark Eclipse (at the beginning of the article) the text in console has some red and green.
(if you did not, take another look :-)
That is because I have support for ANSI escape sequences, added by my “ ANSI Escape in Console” plugin.