Telerik UI for Telerik UI for ASP.NET MVC ThemeBuilder: Overview
ThemeBuilder is a web application that enables you to create your custom styles and to apply them to the UI components in your Telerik UI for Telerik UI for ASP.NET MVC apps.
With ThemeBuilder, you can create new themes, customize existing ones, and organize them in projects. You are in full control of the appearance of every Telerik UI for Telerik UI for ASP.NET MVC component while at the same time you can apply large-scale updates in seconds. To speed up the customization of your Telerik UI for ASP.NET MVC app, the ThemeBuilder preview visualizes every style change almost instantly.
Starting with 2023 R1 SP1, ThemeBuilder is accessible from a new URL. This new ThemeBuilder version replaces the previous ThemeBuilder and provides more free features and also a Pro tier. All your existing custom themes will continue to work in the new ThemeBuilder.
To learn more about using ThemeBuilder, visit the ThemeBuilder documentation portal where you can find detailed information on various topics, for example:
- Creating a Custom Theme.
- Using a Theme in Your Telerik UI for ASP.NET MVC App.
- Reducing the Size of a Theme.
Implementing Design Requirements for Telerik UI for ASP.NET MVC Apps
If you work with designers, ThemeBuilder allows you to style the Telerik UI for Telerik UI for ASP.NET MVC components exactly as required by your application's design and to apply your brand colors.
To improve the collaboration between designers and developers, Telerik UI for Telerik UI for ASP.NET MVC comes with four UI Kits for Figma: Material, Bootstrap, Fluent, and Telerik UI Default. Your designers will use them to create the required application design and to apply your brand colors. To implement these design requirements, you need to create a new theme in ThemeBuilder and customize it:
- Request from the designer to send you a link to the UI kit with the customized colors in Figma.
- Use the link to open the design in Figma. >If you don't have a Figma account, you can create one for free.
Navigate to the Components page and locate the Color Styles in the Inspect Panel, where you can find the values of all colors used in the design.
Create a new project in the ThemeBuilder application. To choose the most suitable starting Theme, ask your designer which UI Kit was used: Default, Bootstrap, Material, or Fluent.
- Copy the color codes from the Color Styles in Figma and paste them in the ThemeBuilder color editor with the same name. For example, copy the value of the
$kendo-primarycolor in Figma and paste it in the Primary color editor in the ThemeBuilder.