I'm just starting to play around with generating a theme for my Ext JS 4.1 (4.2) application. What I want to have as my theme is basically the gray theme, with some customizations. I managed to get this working by moving some image directories around, but when I upgraded to the latest Sencha Cmd (3.0.2) I see to only be able to get the 'default' (or 'theme') images (i.e. the blue ones). Can someone spell out the process by which I can create and use a custom theme in my application which is based on the gray theme?

My initial attempt was to create an app.scss file which sort of looked like this:

Code:
$theme-name: 'gray';
$base-color: #ccc;


//panel
$panel-header-background-gradient: color-stops(#F0F0F0, #D7D7D7);
$panel-border-color: #D0D0D0;
$panel-header-color: #333;

... etc, making some tweaks to some of the variables to suit our desired look ...

@import 'compass';
@import 'ext4/default/all';

/* added some additional CSS styles here */
When I do a compass compile (or a sencha cmd build), I get a new app.css file which does most of what I want, except for where the theme uses some image sprites. The images are all based on the bluish default 'theme' not the gray theme. What's the proper way to deal with this?

I noticed after one of my 'builds' that the theme name was changed from "$theme-name: 'gray'" to "$theme-name: 'theme'". I had used the 'gray' name to pick up the gray images (at least that seemed to work).

Still learning.

Thanks!

Jim