# Theming

## Content

The TreeMap chart control allows you to customize its appearance by using the [Palette](/componentone/api/mvc/online-mvc-core/dotnet-api/C1.AspNetCore.Mvc/C1.Web.Mvc.TreeMap-1.Palette.html) property. You can set a collection value to this property. The collection item type could be **System.Drawing.Color** or [C1.Web.Mvc.TreeMapItemStyle](/componentone/api/mvc/online-mvc-core/dotnet-api/C1.AspNetCore.Mvc/C1.Web.Mvc.TreeMapItemStyle.html).
The following image shows how a TreeMap control appears after applying a theme using **Palette** property.
![C1Web TreeMap - Control UI after applying Paletter property](https://cdn.mescius.io/document-site-files/images/9b6a6cfe-b8e8-42e9-8a04-da6cb7762977/images/theming.png)
The below example code uses FoodSale.cs model added in the [Quick Start](/componentone/docs/mvc/online-mvc-core/WorkingwithControls/TreeMap/Quick-StartTreeMap) section.
**Themeing.cshtml**

```razor
@model IEnumerable<FoodSale>@{
    var colors = new List<string> { "#88bde6", "#fbb258", "#90cd97", "#f6aac9", "#bfa554", "#bc99c7", "#eddd46", "#f07e6e", "#8c8c8c" };
}
<c1-tree-map binding="Sales" binding-name="Category,SubCategory"
             palette="@colors">
    <c1-items-source source-collection="Model"></c1-items-source>
    <c1-flex-chart-datalabel position="Center" content="{name}"></c1-flex-chart-datalabel>
</c1-tree-map>                                              
```