Sencha Touch 2.3: Theming for multiple platforms

Sencha provides different CSS files for different platforms. In their documentation on theming they describe how you need to configure your app.json file, e.g.

"css": [
    {
        "path": "resources/css/sencha-touch.css",
        "platform": ["desktop"],
        "update": "delta"
    },
    {
        "path": "resources/css/wp.css",
        "platform": ["ie10"],
        "theme": "Windows",
        "update": "delta"
    },
    {
        "path": "resources/css/cupertino.css",
        "platform": ["ios"],
        "theme": "Cupertino",
        "update": "delta"
    },
    ...

The respective CSS-files are provided in the folder "touch\resources\css" and at first I thought that one had to copy those into the folder "resources\css" (in which by default already the CSS file "app.css" resides).

Turns out this is not how it works. The CSS file in "resources\css" are generated via Compass and Sass. Therefore one has to

1) copy the .scss files for the themes one is interested in from "touch\resources\sass" to "resources\sass", eg. copy "touch\resources\sass\cupertino.scss" to "resources\sass\cupertino.scss".

Note: You can also delete the existing "app.scss" file from "resources\sass" as you probably do not refer to it anymore from you app.json file. It really is only a copy of the default theme "sencha-touch.scss" and therefore only needed if you only work with one theme - the default one. 

2) execute "compass compile cupertino.scss" in "resources\saas" (you need to have ruby and compass installed) -> this will generate "resources\css\cupertino.css". Repeat this for all the other theme .scss files you use.

When you build using sencha cmd ("sencha app build") it will also call  "compass compile".

The "compass compile" process is controlled by the config file "resources\saas\config.rb". By default it is configured to generate a compressed CSS file (output_style = :compressed). Change this to "output_style = :expanded" if you want to get a readable version of the CSS.

Add your own styles to the themes

You can simply add your own Sass instructions or plain CSS to the copied resources\sass\[theme].scss files.

You can also externalize you Sass/CSS into a separate file and import this into the [theme].scss files (using for example @import '../mySass/myProject.scss';).

If you want to add you own custom (font) icons take a look at Bruno Tavares blog on how to do it.