Thursday, 15 January 2015

How to change dynamically Theme in Lightswitch HtmlClient.

One day I was working on LightSwitch HtmlClient and I was thinking that can we change the theme of the application dynamically? Then I thought that if we can change the css files dynamically then it is possible. So I just created one js function then will help us to make it possible. Here are steps how can we use this. 
Step 1:
Download js file and add its reference on your default.htm file.
Step 2: 
Create two buttons on your screen. Write the below line of code under Execute command.

myapp.Start.DarkTheme_execute = function (screen) {
    // Write code here.
    //replacejscssfile("oldscript.js", "newscript.js", "js") //Replace all occurences of "oldscript.js" with "newscript.js"
    replacejscssfile("light-theme-2.5.1.css", "Content/dark-theme-2.5.1.css", "css"); //Replace all occurences "oldstyle.css" with "newstyle.css"
    replacejscssfile("msls-light-2.5.1.css", "Content/msls-dark-2.5.1.css", "css");
    screen.findContentItem("DarkTheme").isVisible = false;
    screen.findContentItem("LightTheme").isVisible = true; 
myapp.Start.LightTheme_execute = function (screen) {
    // Write code here.
    replacejscssfile("dark-theme-2.5.1.css", "Content/light-theme-2.5.1.css", "css"); //Replace all occurences "oldstyle.css" with "newstyle.css"
    replacejscssfile("msls-dark-2.5.1.css", "Content/msls-light-2.5.1.css", "css");
    screen.findContentItem("DarkTheme").isVisible = true;
    screen.findContentItem("LightTheme").isVisible = false;

Now you can change the theme of dynamically of your application. like