How To Apply Themes Dynamically To Master Page?

Monday, November 11, 2013

How To Apply Themes Dynamically To Master Page?

We all use the concept of Master Pages which sets a defined style pattern to all the pages which included it. The question here is Can we dynamically change the css content in the master page? The answer is yes. You should have already known the concept of themes in which we define any number of custom styles. We actually set some default theme to our site. But what if the user likes to change the theme of the page dynamically ?
The solution is taking a dropdown list in your page and then populating them with the themes available in your application and rendering them into your master page in the Page_PreInit stage of the page life cycle.
Here is the step by step process:

Build as many themes you like under the App_Themes folder of your project
Place the corresponding css styles in your themes.
Add a dropdown list in your master page.
Bind the dropdown list items with the themes.
Select the theme you like.

. Now on changing the dropdown value the code behind should trigger like this.

 protected void Page_PreInit(object sender, EventArgs e)
    {
        string myTheme;
        myTheme = (string)Session["selectedTheme"];
        if (thm != null)
        {
            Page.Theme = myTheme;
            ddlThemes.Text = myTheme;
        }
        else
        {
            Session["selectedTheme"] = ddlThemes.Text;
            Page.Theme = "Blue";
        }
    protected void ddlThemes_SelectedIndexChanged(object sender, EventArgs e)
    {
        Session["selectedTheme"] = ddlThemes.Text;
        Server.Transfer(Request.FilePath);
    }