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