Custom Sencha Touch Themes - Part 3

Useful info:

This is what I've figured out about custom styling Sencha. Images are specified in SASS (and therefore, in CSS) by a function defined as:

theme_image(theme, path, mime_type = nil)


It's defined in resources\themes\lib\theme_images.rb. The "theme" parameter is one I haven't been able to figure out. It refers to Sencha theme name, that much is obvious, but it's not entirely clear how Sencha packages themes. The \resources\themes folder doesn't contain individual theme folders such as "default"; instead it is fillled with other folders. So it's difficult to say which folders belong to which theme.

The path parameter is obviously image URL. The mime_type is an optional parameter; if not specified it will encode the image as a base64. This is only recommended for things like button icons, which can be safely cached for a long time and do not change frequently.

Update: I got around the need for the theme_image function call by specifying the image URL directly. Less elegant, but this is the Sencha Touch Hack Blog.

Custom Sencha Touch Themes - Part 2

Success: I followed this tutorial to get started with SASS and Compass. In a nutshell, you write some SASS stuff, compile it using Compass and it will give you a stylesheet to replace the sencha-touch.css stylesheet. Follow the instructions here. Note: make sure you check ALL the paths in config.rb. The instructions might have an incorrect path for images_dir depending on your directory structure. It happened to me so beware.

Because the tutorial is very bare bones about what Sencha custom theming is capable of, check this out too. Slide 17 has a complete list of Sencha Touch SASS variables. It unfortunately does not include an exhaustive list of Sencha mixins. I don't understand SASS very well at this point, but my sole attempt at extending an existing Sencha mixing resulted in a compile error so I gave it up.