Seeing the nice theme work performed by madrabaz (http://extjs.com/forum/showthread.php?t=15505), I decided to 'semi-automate' the process of creating the 'colorized' images.

Photoshop CS3 Extended 10.0 is javascript scriptable, so I created a script to open the files of the theme, apply a hue/saturation/light, and save them into a new location.

You have to change the hue, saturation, light values yourself manually in the imageParser.jsx file.

Steps.
Save the javascript file as imageParser.jsx.
Open extjs/resources/images/default/panel/tool-sprites.gif in Photoshop
Adjust the hue/saturation/light values. Make sure the colorize checkbox is checked.
Record the values. You will need them later.
Close tool-sprites.gif
Open imageParser.jsx in a text editor.
Change the variables h, s, and l to the values recorded above
Save the file.
Create a new folder for the output of this script. I use extjs/resources/images/NEWFOLDERNAME
In photoshop, File>Scripts>Browse...
Select imageParser.jsx
Select the inputFolder: I use extjs/resources/images/default
Select the outputFolder: I use the one created above: extjs/resources/images/NEWFOLDERNAME
Click ok.
Watch the fun.CSS Modifications
Open the extjs/resources/css/ext-all.css file.
find and replace all instances of default/ with NEWFOLDERNAME/
save as extjs/resources/css/xtheme-NEWFOLDERNAME.cssNote: you will have to change the #RRGGBB colors specified in the new css file, but your sprites have been changed

include the new theme in your html file with
<link rel="stylesheet" type="text/css" href="extjs/resources/css/xtheme-NEWFOLDERNAME.css" />

tada. you have a new theme.

Note: This script only creates a colorized version of the existing files. Any changes to the look-and-feel (other than color) is outside the scope of this post.
Note: Use at your own risk. Any script that automatically modifies your files should be validated prior to running, not just this one. In other words, don't just run this script (or any other) on your system, prior to reading the code "to find out what it really does".
Note: This file was created on an intranet, and retyped here with my fat-fingers...Please excuse typos.

imageParser.jsx

// written for Adobe Photoshop CS3 Extended 10.0 - may not work with your version
// ExtJs Theme Modifier

// if the input folder isn't the output folder
// try to play nicely.. not overwrite the source file
if (inputFolder !== outputFolder){
processFiles({folder:inputFolder});
} else {
log('Input and Output folders are the same');
alert('Sorry. Input and output folders can not be the same folder.');
}
}

Notice; if you apply same hue/saturation/brightness values to tool images, they do not seem properly on the panel or window header

Bryan

19 Oct 2007, 10:20 AM

Notice; if you apply same hue/saturation/brightness values to tool images, they do not seem properly on the panel or window header

I don't think I understand this response. Is this a problem with the CSS or the color of the tool images?

madrabaz

19 Oct 2007, 10:52 AM

Color of the tool image, its borders are dimmed if you apply same values which are applied to header background images

maquina

1 Jun 2008, 6:49 PM

any feedback?

McCornic

27 Oct 2008, 6:54 AM

Thank for your scipt. It was very useful for me.
Just replace the !== with != and === with == on photoshop CS2.

harley.333

27 Oct 2008, 7:19 AM

very cool work - i hope someone takes your work to the web-server and make a theme generator

Condor

27 Oct 2008, 7:30 AM

It would be even nicer if you could specify a scale (e.g. 120% for larger fonts).

(I know that this is a lot harder to do, because for each height and width you need to determine how much of it is fixed size and how much is determined by the font size)

anthony-apd

16 Dec 2008, 8:33 PM

any way to make so you can supply specific color values?

viccyz

25 Dec 2008, 11:58 PM

after this Select the outputFolder: I use the one created above: extjs/resources/images/NEWFOLDERNAME step, it show me error 1220: illegal argument Line 119: -> putInteger(charIDToTypeID("H "), hue); :-?:-?
can any1 help me?
thanks!

Kango_V

1 Jun 2009, 12:49 PM

Hmm, very nice. I wonder though, if this could pe done easier with ImageMagick on Linux?
I might have to try that.