Tutorial: Coloring Eclipse
If you follow me on Twitter, you probably already know that I wear sunglasses in front of the computer at night. Cool, right? I do this because my eyes get warn out and the brighter the screen, the more my eyes hurt. Unfortunately, turning down the brightness of the screen doesn’t help as much as you’d think it would, so I resort to shades.
The brightest color on the screen, white, does the most damage. And oddly enough, Eclipse, the application I use the most, is as white as it gets. I previously developed a theme for TextMate, which helped tremendously, but I don’t use TextMate as often as I’d like. For whatever reason, I never thought of coloring Eclipse until last night. Here’s how you do it.
(Click the images to view at 100%)
Eclipse is a bit more involved when it comes to customization than TextMate. Because it utilizes a variety of plugins, the preferences are not all standardized and they are not all in the same place. Let’s start with the general colors—for items such as background/foreground colors, highlights, selections, etc. These are all located under General/Editors/Text Editors. Under “Appearance color options” there are nine items to color using the button to the right of the menu. The problem I have with this color picker, if you’re using OS X, is that you can’t enter Hex values by hand—the color has to be either chosen with a slider or sampled with the eye dropper.
Now, with syntax coloring, located under Flash(Flex) Builder/Editors/Syntax Coloring, Eclipse doesn’t apply the previously chosen background color to the preview seen above. It’s easy enough to imagine how things will look if you already have your Hex values picked out. Above the preview, you have three expandable menus to configure: Actionscript, CSS, MXML. Here you get to specify text colors and decorations, with the choices of bold, italic, and underline—I keep my syntax decoration free. The color picker in Syntax Coloring is beautiful. It has a field for the Hex value and that’s all I need. Once you’ve handled the syntax, there’s one last step.
Annotations are located at General/Editors/Text Editors/Annotations. They are the little things that only occasionally make an appearance—for instance, “Debug Call Stack”. This one, in particular, is the style for when your application has a runtime error, reverts to the workspace, and highlights the problematic line. The fanciness about these sets of annotations is that you get to choose between outlined boxes, filled highlights, squiggly underlines, etc. I only needed to color the breakpoint, debug, and error annotations, but there are a dozen others for those that use them.
When you’re all set, you’ll have a brand new look, based on your styles. My eyes feel tremendous now that the bright white has been replaced with my Destroy Today darkest gray. Please note, I have yet to find a way to export the styles, but if anyone comes across how, please let me know.











