You’re probably familiar with the default blue Sencha Touch theme you receive whenever you generate a new app. This provides a good starting point but most people will want to go on to alter the theme to suit their needs. It’s difficult to start from scratch however (though you can if you want) and you might want to use something like the iOS theme “Cupertino” to get you started.
Sencha Touch comes with several different themes that can be used, if you take a peek inside the themes folder you’ll find the following are available:
- base
- bb10
- cupertino
- cupertino-classic
- default
- mountainview
- tizen
- windows
But it might not be immediately clear how to use these. I’m a fan of minimal design and favour the Cupertino theme over the default Sencha Touch styling, so let’s take a look at how we can go about implementing this in our own application. Fortunately, it’s quite simple.
First open up your app.scss file, this is found in the /app/resources/sass folder. In a freshly generated application you should be greeted with something like this:
// The following two lines import the default Sencha Touch theme. If you are building
// a new theme, remove them and the add your own CSS on top of the base CSS (which
// is already included in your app.json file).
@import 'sencha-touch/default';
@import 'sencha-touch/default/all';
// Custom code goes here..
// Examples of using the icon mixin:
// @include icon('user');Before we go any further make sure you have compass watching for changes so the .css file is built after this next step. Open up your command prompt, change the directory to the /app/resources/sass folder and run the ‘compass watch’ command. Of course you can also run ‘compass compile’ manually or if you’re using the [‘sencha app watch’ command][1] already you won’t need to worry about it!
Save a copy of the app.scss file and rename it ‘cupertino.scss’. Now we want to tell our app to import the Cupertino theme isntead of the default theme. We can do this by making the following changes to cupertino.scss:
// The following two lines import the default Sencha Touch theme. If you are building
// a new theme, remove them and the add your own CSS on top of the base CSS (which
// is already included in your app.json file).
@import 'sencha-touch/cupertino';
@import 'sencha-touch/cupertino/all';
// Custom code goes here..
// Examples of using the icon mixin:
// @include icon('user');We’re not quite finished yet though, now we’ll need to link our newly generated cupertino.css file in the app.json file. You can find the app.json file in the root directory of the application, you’ll need to make the following changes to the “css” section:
"css": [
{
"path": "resources/css/cupertino.css",
"update": "delta",
"theme": "cupertino"
}
],Now there’s just one final step, the bootstrap.js file needs to be updated. To do this simply run the following command:
sencha app refreshAgain, if you’re already running the ‘sencha app watch’ command you won’t need to worry about this step. If you refresh your application, it should now take on the Cupertino styling and you’re free to continue styling it as you wish. You can repeat these same steps to use any of the themes listed above as well.
[1]: http://www.joshmorony.com/3-things-you-didnt-know-sencha-touch-could-do/ ‘3 Things You Didn’t Know Sencha Touch Could Do’