Change Sench Touch 2.3 Theme before launch

Question

I'm trying to set the theme of my sencha touch app based on url parameter.

http://myapp/?mythemename

I use this code to get the name of the css file:

launch: function() {
    var requestParams = Ext.Object.fromQueryString(location.search.substring(1));

    var styleSheet = '';

    for (prop in requestParams){
       styleSheet = prop;
    }
 }

Question: now that I have the style sheet, when do I add it to the DOM? I would assume I need to listen for an event that signals the default css has been added to the DOM so I can remove it and add my theme. What event do I listen for?

Answer 1

You just need to add your Sencha theme to your app.json file and platform name along with that theme.

"css": [
    {
        "path": "resources/css/sencha-touch.css",
        "platform": ["chrome", "safari", "ios", "ios-classic", "android", "firefox"]
    },
    {
        "path": "resources/css/my-theme.css",
        "platform": ["mytheme"]
    }
]

to change it you just need to pass a query string named platform [http://myapp/?platform=mytheme]