Forum | Appery.io

pI'd like to offer users of my app a series of choices of themes. Are there any ways in appery through JavaScript - to allow the user to change color schemes (swatch defaults mostly) - at runtime ? /ppI know that the colors I like during design - won't be the ones that users will want - in production or even during my beta./ppBuilt in anything ? Anything I can do on my login screen (after login and upon reading a preference from a field(s) on my user collection to change what the app was 'built' with - and not have to write code for each screen ??/pp
/ppThanks !!!!/ppBruce/pp
/p

Hello!

You would need to add style files dynamically to app.

Maryna,

Thanks. I've learned Javascript in less than a month in support my Appery work - but I know very little about 'style files' and how I would do that dynamically - any web links that you would recommend? anyone else done this (with success) in the past on this forum ??

I'm working on a beta release now - and somehow I'm reading between the lines here 'feature out of scope' for release Beta.

Let me know your thoughts... thanks very much
Bruce

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, "");

 var cssUrl = (isFull ? (currentAppPath + "/") : "") + "files/resources/lib/theme/" + themeName + "/" + themeName + ".css"; 

 return cssUrl; 

};

var ActivateTheme = function(themeName){

 //Remove all avaliable themes. 
 for(var i = 0; i < themes&#46;length; i++){ 
     var cssRelatedUrl = GetThemeUrl(themes[i]); 
     jQuery('link[href="' + cssRelatedUrl + '"]')&#46;remove(); 
     console&#46;log("cssRelatedUrl = " + cssRelatedUrl + " = " + themes[i]); 
 }; 

 &#47;&#47;Add new css&#46; 
 var goalThemeUrl = GetThemeUrl(themeName, true); 
 var newCss = jQuery(""); 
 newCss&#46;attr("rel", "stylesheet"); 
 newCss&#46;attr("href", goalThemeUrl); 
 jQuery("head")&#46;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.

Yurii,

Awesome !!! thanks so much !! My team will be so pleased .... very appreciated !!

thanks for your time on this,

Bruce

Hi Yurii,

With the above procedure my theme not changing dynamically can u give some suggestion to change theme dynamically

Hello Amith,

Could you please clarify, do you get any errors in a browser console?

i am not getting any errors but every time its changing color to total black

I checked my code as well in the product that I implemented this in - and I get the same results (black) - not sure if this is an upgrade issue or ??

Unfortunately, Yuri's approach will not work since now, in final app because of optimization only one theme CSS file uploaded, which was selected in "App settings" tab.
To make your app works with multiple themes you need to include all desired themes into new CSS file and change class of each page according to you CSS themes structure.
Otherwise this is can't be done in a simple way.