Bruce Stuart
Posts: 0
Joined: Fri Oct 24, 2014 4:42 am

Run Time setting of themes - color schemes

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

Maryna Brodina
Posts: 0
Joined: Thu Apr 05, 2012 7:27 am

Run Time setting of themes - color schemes

Hello!

You would need to add style files dynamically to app.

Bruce Stuart
Posts: 0
Joined: Fri Oct 24, 2014 4:42 am

Run Time setting of themes - color schemes

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

Yurii Orishchuk
Posts: 0
Joined: Fri Feb 14, 2014 8:20 am

Run Time setting of themes - color schemes

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&#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

&#47;&#47;to Activate "ios-like" theme&#46;
ActivateTheme("ios-like");

&#47;&#47;to Activate "winter" theme&#46;
&#47;&#47;ActivateTheme("winter");

&#47;&#47;You can use any theme name from array from 1st step&#46;

/pre

Regards.

Bruce Stuart
Posts: 0
Joined: Fri Oct 24, 2014 4:42 am

Run Time setting of themes - color schemes

Yurii,

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

thanks for your time on this,

Bruce

Amith Reddy
Posts: 0
Joined: Wed Aug 06, 2014 5:48 am

Run Time setting of themes - color schemes

Hi Yurii,

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

Evgene Karachevtsev
Posts: 12
Joined: Mon Apr 28, 2014 1:12 pm

Run Time setting of themes - color schemes

Hello Amith,

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

Amith Reddy
Posts: 0
Joined: Wed Aug 06, 2014 5:48 am

Run Time setting of themes - color schemes

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

Bruce Stuart
Posts: 0
Joined: Fri Oct 24, 2014 4:42 am

Run Time setting of themes - color schemes

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 ??

Illya Stepanov
Posts: 0
Joined: Mon Mar 18, 2013 8:48 am

Run Time setting of themes - color schemes

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.

Return to “Issues”