Changing font colors in Flex Builder/Eclipse
March 13th, 2007 . by polyGeekI’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.
Photo covers the text.
@Dave, I checked all sorts of things in both FF and IE and can’t get the photos to cover the text. Are you on a Mac? I went in and surrounded the images with <br clear=”all” /> - tags. Maybe that will fix it for you.
Working OK for me - FF2 on Intel Mac, and IE7 on Win2kSP2.
polyGeek just posted and interesting piece on how to change the text and background colors in Eclipse (specifically in Flex Builder - looks like you'd have to do something similar in CFE as well if you wanted the same color scheme for your CF code). …
looks clear…
You should try Dina font. It is awesome. Readible @ small resolution for more code on the page.
http://www.donationcoder.com/Software/Jibz/Dina/index.html
@Mike, thanks for the suggestion. I’ll try that out but I find that the best way to fit more code on a screen is to get a bigger monitor, or monitors! :-)
I’m a big fan of Andale Mono as a fixed width font and I usually run it at about 12pt.
Has anybody gotten this to work on OSX? The zips the finder and the commandline unix zip tool doesnt create working zip/jar files.
@Joe, I wish I could help. If you don’t have your own blog in which to post your question I’d suggest posting to a few forums and see if you get anything.
Roughly 1000 people a month view this post but I doubt if many read the comments. If you try the forums and that doesn’t work let me know. I’ll try reposting something here that might get an answer to your question.
I don’t see com.adobe.flexbuilder.editors.common_2.0.155577 or anything remotely similar in my plugins directory - I’ve also searched for common.jar and found nothing. Maybe mine really is under some moss in Borneo. Does anyone have any idea why it seems to be different on my system? (Win2k sp4)
I wish Eclipse allowed us to use a less arcane method to do something as simple as changing the font colours. The General/Appearence/Colours and Fonts menu lets you choose a colour, but then sets itself back to black automatically. I wonder who thought this was good UI design? I’m glad polyGeek has posted the mystic rites required to change the font colours…it’s just a shame my system seems to be different. :(
@Alan, I have no idea why yours seems to be different. Hopefully another reader will have some advise for you.
I believe that the Flex color settings are an issue with Adobe’s plugin rather than with Eclipse itself. I know that the ColdFusion plugin for Eclipse allows the user to edit code highlighting colors from the IDE. Maybe with Flex 3 they will add that capability.
Also, if you change the color settings from within Eclipse you have to export the settings so that you can use them in other projects. File -> Export -> General -> Preferences.
Hej!
Thank you, this is exactly what I’ve been looking for! About the replacement process I just unzipped the jar (I’ve set .jar-file type to be opened with winzip) to a temporary directory, made the changes, zipped it up and renamed the file to .jar. It worked fine for me.
@Mattias, sweet. May all your code be colored as you desire. :-)
Hi,
Could you export your preferences?
File > Export > [General > Preferences]
Exports to epf
(but be sure do it on an empty workspace as there’s an option to also export your RCS settings - I must admit I do not fully know how it works)
That way you can publish your settings easily and… We can import them without having to touch the common.jar file.
:-)
Thanks
Thank you very much !
Very useful tip!
Find a file named “common.jar” under the directory. polygeek suggested to back up the file somewhere else before making changes to it, I followed …
I also can’t find com.adobe.flexbuilder.editors.common~
Im using linux version, any ideas where is the file?
I suspect that it is one of the org.~ files but I still can’t find correct one
@machu, No idea about Linux. The only thing I could think of is doing a file search.
Leave a Reply