Hi Bruce,
Here is a solution to change themes dynamically:
1 Create new JS asset.
2 Populate it with following JS code:
pre
var themes = [
"dendrite",
"ios-like",
"gelato",
"flat-ui",
"ios7",
"jqm",
"jqm-classic",
"olive",
"pastel",
"winter"
];
var GetThemeUrl = function(themeName, isFull){
var currentAppPath = location.pathname.replace(/\/[\/]*$/gi, "");
Code: Select all
var cssUrl = (isFull ? (currentAppPath + "/") : "") + "files/resources/lib/theme/" + themeName + "/" + themeName + ".css";
return cssUrl;
};
var ActivateTheme = function(themeName){
Code: Select all
//Remove all avaliable themes.
for(var i = 0; i < themes.length; i++){
var cssRelatedUrl = GetThemeUrl(themes[i]);
jQuery('link[href="' + cssRelatedUrl + '"]').remove();
console.log("cssRelatedUrl = " + cssRelatedUrl + " = " + themes[i]);
};
//Add new css.
var goalThemeUrl = GetThemeUrl(themeName, true);
var newCss = jQuery("");
newCss.attr("rel", "stylesheet");
newCss.attr("href", goalThemeUrl);
jQuery("head").append(newCss);
};
/pre
3 Okay now you can use following code to change theme in runtime when you need on any event:
pre
//to Activate "ios-like" theme.
ActivateTheme("ios-like");
//to Activate "winter" theme.
//ActivateTheme("winter");
//You can use any theme name from array from 1st step.
/pre
Regards.