Question

Nicolás Lope de Barrios on Wed, 16 Jul 2014 12:03:55


I know these are Single Page Apps and theme styles are loaded in default.htm, but maybe there's a hack to override them...?

Nicolás Lope de Barrios
If you found this post helpful, please "Vote as Helpful". If it actually answered your question, please remember to "Mark as Answer". This will help other people find answers to their problems more quickly.

Replies

joshbooker on Wed, 16 Jul 2014 12:25:16


It should be possible using theme swatches. 

I would make a new css and use light theme as swatch 'a' and dark theme as swatch 'b'...copy and paste the styles from those two files.  Then try to set data-theme="b" on the header, page and footer divs to switch from light to dark.

http://demos.jquerymobile.com/1.2.1/docs/pages/pages-themes.html

HTH,

Josh

Jan Van der Haegen on Wed, 16 Jul 2014 13:48:01


I'm sure Josh's reply can work.

An additional path to venture on might be to load the css dynamically when each screen is created (http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml) ?


Nicolás Lope de Barrios on Wed, 16 Jul 2014 14:13:26


Thank you both. I'll study those options. Also, I'm considering adding another HTML Client as well. That would be the best for my scenario, but I'm not sure if it will work on a migrated solution (from VS 2012 update 4 to 2013).

Xpert360 on Wed, 16 Jul 2014 14:48:07


Whilst contemplating that you need to know that the swatch is hard-coded in msls-2.5.0.js

cssDefaultJqmTheme = "a"

I think what you wish to do at least was very messy, if it works cleanly now IDK.

Good luck!

Dave

Nicolás Lope de Barrios on Fri, 18 Jul 2014 18:52:37


I'm sure Josh's reply can work.

An additional path to venture on might be to load the css dynamically when each screen is created (http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml) ?



Keep rocking LS!
Jan

PS: have you seen app-stitch yet? It's a visually simple yet powerful way of designing business rules for Visual Studio LightSwitch apps.

Jan's suggestion was great, with a simple function called on every screen I can switch to the theme I want. It uses the function described in the link.

//Switch to theme dark or light
function switchToTheme(target) {
    if (target == "dark") {
        replacejscssfile("Content/light-theme-2.0.0.css", "Content/dark-theme-2.0.0.css", "css");
        replacejscssfile("Content/msls-light-2.0.0.css", "Content/msls-dark-2.0.0.css", "css");
    }
    else if (target == "light") {
        replacejscssfile("Content/dark-theme-2.0.0.css", "Content/light-theme-2.0.0.css", "css");
        replacejscssfile("Content/msls-dark-2.0.0.css", "Content/msls-light-2.0.0.css", "css");
    }
}