New to Telerik UI for ASP.NET MVC? Download free 30-day trial

Change Theme On The Client

Environment

Product Progress® Telerik® UI for UI for ASP.NET MVC

Description

How can I allow the user to change the theme in my Telerik UI for ASP.NET MVC application?

Solution

The Step by Step guide below demonstrates how to allow the user to change the theme of the application. The approach demonstrated uses cookies to store the theme selected by the user. For a runnable example, refer to the GitHub repo on how to change the theme on the client.

Adding a DropDownList for theme selection

Add a UI for ASP.NET MVC DropDownList to the _Layout.cshtml file for theme selection.

    @(Html.Kendo().DropDownList()
        .Name("themeSelector")
        .DataTextField("Name")
        .DataValueField("ThemeId")
        .OptionLabel("Select Theme")
        .Height(300)
        .AutoWidth(true)
        .DataSource(source =>
            {
            source.Read(read =>
            {
                    read.Action("GetThemes", "Home");
                });
            }).Events(ev => ev.Change("themeSelection"))
        .HtmlAttributes(new { style = "float: right" })
    )

Sending information on the selected theme to the server

Upon selection of a theme, pass the selected theme name to an action method responsible for setting the theme.

    function themeSelection(e) {
        var selectedTheme = e.sender.dataItem();
        $.post({
            url: "/Home/SetTheme",
            data: { selection: selectedTheme.ThemeId },
            success: function (data) {
                window.location = data.url;
            }
    });

Append the name of the selected theme to a cookie.

    [HttpPost]
    public ActionResult SetTheme(string selection)
    {
        HttpCookie cookie = Request.Cookies.Get("theme");
        if(cookie == null)
        {
            cookie = new HttpCookie("theme", selection) { Expires = DateTime.Now.AddMinutes(10) };
        }
        else
        {
            cookie.Value = selection;
        }

        HttpContext.Response.AppendCookie(cookie);
        var returnUrl = Request.Headers["Referer"].ToString();
        return Json(new { result = "Redirect", url = returnUrl });
    }

Loading the selected theme

Set the theme in the _Layout.cshtml file, by following the requirements discussed in the Including Client-Side Resources article. In the current example, the selected theme name is retrieved from the cookie and the CDN url for theme is generated. An alternative approach, if stylesheets are stored within the application, would be to generate the url to the stylesheet for the selected theme.

    @{
        var specialThemes = new string[] { "nova", "bootstrap", "fiori", "material", "materialblack", "office365" };
        var sassThemes = new string[] { "default-v2", "bootstrap-v4", "material-v2" };
        var commonThemeName = "common";
        var mainHref = "https://kendo.cdn.telerik.com/2022.3.913/styles/kendo.";
        var isThemeSelected = Context.Request.Cookies.TryGetValue("theme", out string selectedTheme);

        if (!isThemeSelected)
        {
            selectedTheme = "default";
        }

        var themeHref = mainHref + selectedTheme + ".min.css";
        var commonThemeHref = mainHref + commonThemeName + ".min.css";
        if (specialThemes.Any(x => x == selectedTheme))
        {
            commonThemeName += "-" + selectedTheme.Replace("materialblack", "material");
        }

        if (sassThemes.Contains(selectedTheme) && selectedTheme == "custom")
        {
            <link rel="stylesheet" href="~/css/styles/kendo.custom.css" />
        }
        else if (sassThemes.Contains(selectedTheme))
        {
            <link href=@themeHref rel="stylesheet" type="text/css" />
        }
        else
        {
            <link href=@commonThemeHref rel="stylesheet" type="text/css" />
            <link href=@themeHref rel="stylesheet" type="text/css" />
        }
    }

See Also

In this article