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
