Building Visual Styles

ThemeBuilder empowers you to create UI components with unique looks. You can experiment with different colors, typography, and border-radius values. You will immediately see the resulting appearance of the Telerik and Kendo UI components on the screen.

Creating a Project for Your Styles

To start applying your ideas, first create a new ThemeBuilder project. The project allows you to store your visual themes, apply them to the Telerik and Kendo UI component, and collaborate with coworkers.

1. Navigate to themebuilderapp.telerik.com.

2. Log into your account

   

3. Select Create New Project.

4. Enter a name for your project and then select a base theme to use as a starting point:

   • Kendo Default Theme—Our neutral styling that suits most cases.
   • Kendo Bootstrap Theme—A theme that matches the Bootstrap styling.
   • Kendo Material Theme—A theme that implements the Material Design Guidelines.
   • Kendo Fluent Theme—A theme based on Microsoft Fluent UI and using CSS variables.
   • Kendo Classic Theme—A Sass variant of the obsolete Kendo Less Classic theme.

   These five themes ship with the Telerik and Kendo UI components and you can use ThemeBuilder to transform them completely.

Exploring the Project Main Screen

When you open a ThemeBuilder project, the ThemeBuilder screen appears automatically and allows you to implement your ideas:

• To change the appearance of the components, edit the values in the THEME STYLES pane on the left.

• To see how the UI components look after your changes, check the Live Preview on the right.

  By default, you see all available UI components. To reduce the number of the UI components in the Live Preview pane, use the dedicated button—it is located on the right in the ThemeBuilder header.

Editing the Theme Styles

In the THEME STYLES pane, you can select a number of color variations that alter the Kendo theme that you select when creating a new ThemeBuilder project. These color variations are called swatches and they are unique for each of the Kendo themes.

• To select a color swatch, use the dedicated DropDown Button in the THEME STYLES pane.

  

• To further customize the appearance of the components by using the THEME STYLES pane:

  • Edit the values of the variables.
  • Add new variables by using the + button.

As each base theme requires a different type (SASS or CSS) and number of pre-defined variables, the default variables in the THEME STYLES pane will vary depending on the selected base theme.

ThemeBuilder gives you the flexibility to use the SASS or CSS variables in the THEME STYLES pane to change the appearance of the UI components by applying advanced styling strategies. To enable this functionality, use the Advanced Edit button.

Editing the Kendo Default, Bootstrap, and Classic Themes

The Kendo Default, Bootstrap and Classic themes expose a number of pre-defined SASS variables that are grouped by type:

Variable Type	Description
Metrics	You can add your custom metrics by using the + button. The $kendo-border-radius variable is included by default and allows you to change the rounding of the elements.
Typography	The typography SASS variables allow you to change the font and its properties, for example, font-weight, font-size, font-height, and letter-spacing. You can add multiple typography styles by using the + button.
Colors	The various color-related variables allow you to edit the colors in the visual theme. For easier navigation, the colors are grouped by type and usage, for example: THEME COLORS—lists the colors that apply to the entire theme. BODY—lists the colors that affect the styles of the HTML document body. For example, to set a custom background color for the entire document, enter a new value for the $body-bg property. COMPONENTS—lists the component-specific colors, for example, the color for the selected state. BUTTON—lists the colors specific to the Button component. LINK—lists the colors for the links. DATAVIZ—lists the colors used for data visualization, for example, in the Chart component.

Editing the Kendo Material Theme

The Kendo Material theme exposes the following types of pre-defined SASS variables:

Variable Type	Description
Metrics	You can add your custom metrics by using the + button. The $kendo-border-radius variable is included by default and allows you to change the rounding of the elements.
Typography	The typography SASS variables allow you to change the font and its properties, for example, font-weight, font-size, font-height, and letter-spacing. You can add multiple typography styles by using the + button.
Palettes	The Material theme allows you to select a primary and a secondary color for your theme. In addition, it offers a light and dark variant.
Colors	The Material theme has predefined data visualization colors for the Chart component. You can add your own colors by using the + button.
Effects	The effects SASS variables allow you to add your custom values for box-shadow, filter or backdrop-filter properties by using the + button. The Material theme has predefined box-shadow variables used in the Button, Card, Window and other components.

Editing the Kendo Fluent Theme

The Kendo Fluent theme exposes the following types of pre-defined CSS properties:

Variable Type	Description
Metrics	You can add your custom metrics by using the + button. The $kendo-border-radius variable is included by default and allows you to change the rounding of the elements.
Typography	The typography CSS property allow you to change the font and its properties, for example, font-weight, font-size, font-height, and letter-spacing. You can add multiple typography styles by using the + button.
Palettes	The Fluent theme allows you to select a primary and a neutral color palette for your theme.
Colors	The various color-related properties allow you to edit the colors in the visual theme. For easier navigation, the colors are grouped by type and usage, for example: THEME COLORS—lists some of the theme-specific colors that aren't defined by the selected palette. DATAVIZ—lists the colors used for data visualization, for example, in the Chart component.
Effects	The effects CSS variables allow you to add your custom values for box-shadow, filter or backdrop-filter properties by using the + button. The Fluent theme has predefined box-shadow variables.

Unlike the Kendo Default, Kendo Bootstrap, and Kendo Material themes, the Kendo Fluent theme uses CSS variables to enable the customization.

Related Articles

• Applying Advanced Customizations
• Using Your Custom Fonts in ThemeBuilder