Changing font colors in Flex Builder/Eclipse

March 13th, 2007 . by polyGeek

I’m a big fan of coding on black. That’s using a black background and bright colors for the text. Unfortunately I’ve had nothing but trouble setting this up in Eclipse. Lucky for me there was a session at 360Flex called Flex Builder Secrets where I learned a great deal about how to use the hidden features in Eclipse and got the scuttle bug on how to change those pesky colors.

Here’s the rub: you can’t change the text colors inside of Eclipse. You have to go into an XML file that’s buried in a .jar file in your installation folder, under some peat moss at the bottom of a deep ravine in the heart of Borneo. Okay, that last part is hyperbole.

Before we get started editing the colors we need to change the background color of the code window. You would think that the background color would be controlled in the same place as the text colors, but, sadly, you would be wrong.

The image below shows you where to change the background color and while we’re at it you can change the font if you wish. The preferences are under: Window -> Preferences… Uncheck the System Default checkbox and select the color that you would like to use.

Now to edit the color coding. Find the \plugins\ subfolder in your installation folder. For me it’s: C:\Program Files\eclipse\plugins. Now there are a bunch of subfolders there. You’re looking for the com.adobe.flexbuilder.editors.common_2.0.155577 - that number at the end is the build number and may be different than mine.

Now I’m in the subfolder: C:\Program Files\eclipse\plugins\com.adobe.flexbuilder.editors.common_2.0.155577. In there you should see a file named common.jar. Before going any further you’ll want to make a backup of that file. I created a backup folder in the \plugins\ folder so that I wouldn’t be duplicating the .jar file inside itself. You’ll see how this works in a moment.

Inside the .jar file is the colors.xml file. A .jar file is really the same thing as a .zip file so if you’re on Windows you can just change the extension and then unzip it. It will create two more subfolders: com, META-INF. To find the XML file we’re looking for drill down to: com -> adobe -> flexbuilder -> editors -> common -> color. You should now see the Colors.xml file in the midst of a bunch of .class files. You can change the text color, and set the italics and/or bold properties. If any certain node doesn’t have the italic or bold attribute then it defaults to false. You can simply add the attribute and make it true to turn it on.

If you want something like this you can download my colors.xml file.

All that’s left to do is update the .jar file with the changes you made to the Colors.xml file. If you know how to do that then you’re set but this is the part that really fraked with me. Here’s how I ended up doing it.

Create a new zip file in the \plugins\ folder, one folder under where you found the common.jar file.
Now drag the \com\adobe\flexbuilder\editors\common\color folder into the zip file.
*Drag your zip file up into the \com\adobe\flexbuilder\editors\common\color folder.
Rename your zip file to common.jar.
Restart Eclipse or FlexBuilder.

*This sounds sort of messed up I know but the path in the .jar/.zip file must be \com\adobe… I couldn’t get the path right without doing it this convoluted way. Hey, whatever works. If you get an error while starting Eclipse/FlexBuilder then you probably messed up the paths and you’ll need your backup file.

Good luck and may you enjoy coding on black, or whatever color you enjoy.

If something here has proved valuable to you then feel free to drop a couple of bucks in the tip-jar.