Question

I’m learning ASP.net and I’ve been playing around with themes and master pages. I decided I wanted to change the theme of the website, and used the web.config solution (adding theme to web.config). What I want to do now is to be able to change the theme based on user and the selected theme by the user.

I have been unable to find any tutorials, all of them seem to show how to change separate contentpages, but I want to change the whole site theme.

How do you go about doing that, in the simplest way? I am not connected to a database atm., it’s just for practice 🙂

with kind regards

Answer 1

Create a base page that you inherit all your pages from and set the theme in the OnPreInit event:

public class ThemePage : System.Web.UI.Page
{
    protected override void OnPreInit(EventArgs e)
    {
        SetTheme();            

        base.OnPreInit(e);
    }

    private void SetTheme()
    {
        this.Theme = ThemeSwitcher.GetCurrentTheme();
    }
}

Below is the ThemeSwitcher utility class that handles getting/saving the current theme and listing themes. Since you said you’re not using a database you can use Session:

public class ThemeSwitcher
{
    private const string ThemeSessionKey = "theme";

    public static string GetCurrentTheme()
    {
        var theme = HttpContext.Current.Session[ThemeSessionKey]
            as string;

        return theme ?? "Default";
    }

    public static void SaveCurrentTheme(string theme)
    {
        HttpContext.Current.Session[ThemeSessionKey]
            = theme;
    }

    public static string[] ListThemes()
    {
        return (from d in Directory.GetDirectories(HttpContext.Current.Server.MapPath("~/app_themes"))
                select Path.GetFileName(d)).ToArray();
    }
}

You’ll want a page where you can change the theme. Add a dropdownlist with the following code behind:

public partial class _Default : ThemePage
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            BindData();
        }
    }

    private void BindData()
    {
        var currentTheme = ThemeSwitcher.GetCurrentTheme();

        foreach (var theme in ThemeSwitcher.ListThemes())
        {
            var item = new ListItem(theme);
            item.Selected = theme == currentTheme;
            ddlThemes.Items.Add(item);
        }
    }

    protected void ddlThemes_SelectedIndexChanged(object sender, EventArgs e)
    {
        ThemeSwitcher.SaveCurrentTheme(ddlThemes.SelectedItem.Value);
        Response.Redirect("~/default.aspx");
    }       
}

You can download the sample application here.