Change theme on the fly ?

**debianw** · 22 Aug 2012 8:08 AM

Is there a way in Touch 2 to change the global theme on the fly ?.

I have an app that requires a different skin depending on which section you are.

**jerome76** · 22 Aug 2012 4:59 PM

I was doing some research into this a little over a year ago and I did have a working solution. Unfortunately, I don't have access to that old code (from ST1.0), but I did discover and modify something else:

(It isn't necessarily from the Sencha Touch framework, but it does use JavaScript)

You can try using this to remove css files:

Code:

//in your change function...

var scripts = document.getElementsByTagName('script'); //or document.scripts


Ext.Array.each(scripts, function(script, index) {
    var extIdx = script.src.indexOf('.css') + 4,
        src       = script.src;
    if(extIdx !== -1) {
        var begIdx = 0;
        for(var i = src.length; i > 0; i--){
            if(src[i] == "/"){
                begIdx = i;
                i = 0; //end loop
            }
        }
        var file = src.substring(begIdx, extIdx)
        removejscssfile(file);
    }
});



//---------------------------------------------------------------------------------------
//you can put this in the index.html or create a function to use in your app


/**
 * This is remove all instances of 'filename.filetype' on the page
 */
function removejscssfile(filename, filetype){
    //determine element type to create nodelist from
    var targetelement=(filetype=="js") ? "script" : (filetype=="css") ? "link" : "none";
    
    //determine corresponding attribute to test for
    var targetattr=(filetype=="js") ? "src" : (filetype=="css") ? "href" : "none";
    
    var allsuspects=document.getElementsByTagName(targetelement);
    
    //search backwards within nodelist for matching elements to remove
    for (var i = allsuspects.length; i >= 0; i--){
        if(allsuspects[i]
            && allsuspects[i].getAttribute(targetattr) != null
            && allsuspects[i].getAttribute(targetattr).indexOf(filename) != -1
          ){
            //remove element by calling parentNode.removeChild()
            allsuspects[i].parentNode.removeChild(allsuspects[i]);
        }    
    }
}

You can try this for adding the file:

Code:

/**
 * Sample output would be added to the <head> of the document
 * <link rel="stylesheet" href="resources/css/filename.css" type="text/css" media="screen">
 */
function addCSSfile(filename){
    var headID = document.getElementsByTagName("head")[0];
    var cssNode = document.createElement('link');
    cssNode.type = 'text/css';
    cssNode.rel = 'stylesheet';
    cssNode.href = 'resources/css/' + filename + '.css';
    cssNode.media = 'screen';
    headID.appendChild(cssNode);
}

I haven't really tested it but I think it could work.

If it doesn't, I hope it gives you more insight on it

**debianw** · 22 Aug 2012 7:34 PM

Today I built a Singleton Util class for CSS. This class let me switch between custom themes on the fly.

Example:

Code:

   CSS.swapStyleSheet('android'); 
   CSS.swapStyleSheet('bb6'); 
   CSS.swapStyleSheet('apple');

Here is the repo: https://github.com/debianw/CSSUtil-for-sencha-touch2

I built a little demo too.

**jerome76** · 22 Aug 2012 7:43 PM

Originally Posted by debianw

Today I built a Singleton Util class for CSS. This class let me switch between custom themes on the fly.

Example:

Code:

   CSS.swapStyleSheet('android'); 
   CSS.swapStyleSheet('bb6'); 
   CSS.swapStyleSheet('apple');

Here is the repo: https://github.com/debianw/CSSUtil-for-sencha-touch2

I built a little demo too.

SwapStyleSheet, that's what it was!

thanks debianw

Change theme on the fly ?

Thread Tools

Search Thread

Display

Change theme on the fly ?

Change theme on the fly ?

Tags for this Thread