Material Theme

Variables

The Telerik and Kendo UI Material theme employs multiple variables that you can use to customize the theme.

Color Palette

As this theme follows the Material Design guidelines, it sets itself apart from the other Telerik and Kendo UI themes by implementing color palettes and the option to choose between dark and light theme variants. This helps you to customize the theme while following the Material Design guidelines. The preferred way for customizing the theme is by changing the primary, secondary, and tertiary palette and also by switching between the light and dark variants.

The following example shows how to customize the primary and secondary color palettes and make your theme dark.

// High level variables
$primary-palette-name: purple;
$secondary-palette-name: cyan;
$theme-type: dark;

// Import the theme after your customization
@import "@progress/kendo-theme-material/dist/all.scss";

If you need more flexibility and you do not insist on following the Material guidelines strictly, you can customize the theme variables in the same way as with the other Telerik and Kendo UI themes.

Variables by Scope

When it comes to the effect that a specific change in a variable's value causes, variables are not equal. Changing some values will have a much wider impact on the theme than changing others.

Depending on the extent of the styles that each variable controls, the variables fall into three main groups:

• Global variables—They control globally used theme colors like $kendo-color-primary, $kendo-color-secondary, $kendo-color-success, $kendo-color-error.
• Variables affecting all UI components—For example,  $kendo-component-text, $kendo-component-bg.
• Variables affecting individual UI components—For example, $kendo-grid-bg, $kendo-tabstrip-font-size.

Most component-level variables link to generic variables that are higher in the hierarchy. For instance, you can customize the background of the Grid component both through the $kendo-component-bg and $kendo-grid-bg variables. In this case, consider that the $kendo-grid-bg variable references $kendo-component-bg.

Here is a quick example on how to customize the Telerik and Kendo UI Material theme:

// Change primary color of the theme
$kendo-color-primary: #b5026d;

// Increase the line height
$kendo-line-height: math-div( 30, 14 );

// Import the theme after your variables customization
@import "@progress/kendo-theme-material/dist/all.scss";

// Note: the variables bellow this point will not take effect,
// because the theme is already imported

$kendo-component-border: blue;

List of Variables

The following tables represent the variables in the Telerik and Kendo UI Material theme by the type of styles that they control.

Typography Variables

The typography Sass variables set the styles related to fonts and text.

Common Variables

The common Sass variables control a wide range of styles that are not related to a specific UI component.

Component Variables

The component Sass variables are dedicated to a specific UI component and control its styles.

Color-System Variables

The color-system Sass variables control the theme styles related to color.

Charts Variables

The Chart Sass variables are specific to the Chart UI component. They do not affect other components.