# Changing the Theme On The Client

## Environment

<table>
	<tbody>
        <tr>
			<td>Product</td>
			<td>Progress® Telerik® UI for UI for ASP.NET Core</td>
		</tr>
	</tbody>
</table>

## Description

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

## Solution

The step-by-step guide below demonstrates how to allow the user to change the theme of the application. The demonstrated approach uses cookies to store the theme selected by the user.

### 1. Adding a DropDownList for Theme Selection

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

```razor
    @(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" })
    )
```

### 2. Sending Information about the Theme to the Server

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

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

2. Append the name of the selected theme to a cookie.

   ```C# Controller
       [HttpPost]
       public IActionResult SetTheme(string selection)
       {
           CookieOptions cookie = new CookieOptions();
           cookie.Expires = DateTime.Now.AddMinutes(10);

           Response.Cookies.Append("theme", selection, cookie);
           var returnUrl = Request.Headers["Referer"].ToString();
           return Json(new { result = "Redirect", url = returnUrl });
       }
   ```

### 3. Loading the Selected Theme

Set the theme in the `_Layout.cshtml` file by following the requirements discussed in the [Including Client-Side Resources](https://www.telerik.com/aspnet-core-ui/documentation/installation/adding-client-side-resources/getting-started-copy-client-resources) article. In the current example, the selected theme name is retrieved from the cookie and the CDN URL for theme is generated.

If you store the stylesheets within the application, an alternative approach is to generate the URL to the stylesheet for the selected theme.

```razor
    @{
        var mainHref = "https://kendo.cdn.telerik.com/themes/6.3.0/";
        var selectedTheme = "classic/classic-main";

        if (Request.Cookies["theme"] != null)
        {
            selectedTheme = Request.Cookies["theme"];
        }

        if (selectedTheme == "custom")
        {
            <link rel="stylesheet" href="~/css/styles/kendo.custom.css" />
        }

        else
        {
            var themeHref = mainHref + selectedTheme + ".css";
            <link href=@themeHref rel="stylesheet" type="text/css" />
        }
    }
```

## More ASP.NET Core DropDownList Resources

* [ASP.NET Core DropDownList Documentation](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/dropdownlist/overview)

* [ASP.NET Core DropDownList Demos](https://demos.telerik.com/aspnet-core/dropdownlist)

* [ASP.NET Core DropDownList Product Page](https://www.telerik.com/aspnet-core-ui/dropdownlist)

* [Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)](https://www.telerik.com/aspnet-core-ui/documentation/getting-started/video-onboarding)

* [Telerik UI for ASP.NET Core Forums](https://www.telerik.com/forums/aspnet-core-ui)

## See Also

* [Client-Side API Reference of the DropDownList for ASP.NET Core](https://docs.telerik.com/kendo-ui/api/ui/dropdownlist)
* [Server-Side API Reference of the DropDownList for ASP.NET Core](https://docs.telerik.com/aspnet-core/api/dropdownlist)
* [Telerik UI for ASP.NET Core Breaking Changes](https://www.telerik.com/aspnet-core-ui/documentation/backwards-compatibility/2023-backwards-compatibility)
* [Telerik UI for ASP.NET Core Knowledge Base](https://docs.telerik.com/aspnet-core/knowledge-base)