Customization of the Default Theme
The Telerik and Kendo UI Default theme is a versatile theme that you can customize to match the design of your application. The theme employs multiple variables that you can use to customize the theme.
Color
To learn how the Telerik and Kendo UI Default theme implements colors through its color system, see the Color Overview article.
To customize the color system in the Telerik and Kendo UI Default theme, use either of the following approaches:
- Use the predefined color variables.
- Modify the color CSS variables.
- Modify the color Sass variables.
Predefined Color Variables
You can use the $kendo-colors map as is or customize it to fit your specific design needs. The predefined values in the Default theme are based on the Default Design color palette and are available in the $kendo-colors Sass map.
To use the predefined values, the recommended approach is to utilize the k-color() function, which takes a color name from the $kendo-colors map as a parameter and returns a CSS variable (custom property) with the actual color as a fallback:
// Import the Default theme.
@import "@progress/kendo-theme-default/dist/all.scss";
.my-element {
background-color: k-color( primary ); // Apply the primary color as a background color to .my-element.
}
The k-color() function utilized above returns the following CSS code:
.my-element {
background-color: var(--kendo-color-primary, #ff6358);
}
Color CSS Variables
Another way to customize the color system of the Default theme is to modify the CSS variables as each value in the Sass map is also represented as a CSS variable (custom property) and exposed at the root level:
:root {
--kendo-color-primary-subtle: #ffeceb;
--kendo-color-primary-subtle-hover: #ffdedb;
--kendo-color-primary-subtle-active: #ffc8c4;
--kendo-color-primary: #ff6358;
--kendo-color-primary-hover: #ea5a51;
--kendo-color-primary-active: #d45349;
--kendo-color-primary-emphasis: #ff9d97;
--kendo-color-primary-on-subtle: #5c201c;
--kendo-color-on-primary: #ffffff;
--kendo-color-primary-on-surface: #ff6358;
// Configure more swatch colors
// ...
}
Using the CSS variables allows for greater flexibility and easier customization when applying colors to various elements. For example, here is how you can apply these custom properties in your code:
.my-element {
background-color: var(--kendo-color-primary) // Apply the primary color to .my-element.
}
Color Sass Variables
You can modify either all values in the $kendo-colors Sass map or only those that belong to a specific variable group, for example, primary:
// Modify the colors map before importing the theme.
$kendo-colors: (
primary-subtle: #ffeceb,
primary-subtle-hover: #ffdedb,
primary-subtle-active: #ffc8c4,
primary: #ff6358,
primary-hover: #ea5a51,
primary-active: #d45349,
primary-emphasis: #ff9d97,
primary-on-subtle: #5c201c,
on-primary: #ffffff,
primary-on-surface: #ff6358,
);
@import "@progress/kendo-theme-default/scss/dist/all.scss";
Spacing
To learn how the Telerik and Kendo UI Default theme implements spacing see the Spacing Overview article.
To customize the spacing system in the Telerik and Kendo UI Default theme, use either of the following approaches:
- Use the predefined spacing variables.
- Modify the spacing CSS variables.
- Modify the spacing Sass variables.
Predefined Spacing Variables
You can use the $kendo-spacing map as is or customize it to fit your specific design needs. The predefined spacing values in the Default theme are available in the $kendo-spacing Sass map.
To use the predefined values, the recommended approach is to utilize the k-spacing() function, which takes a spacing step from the $kendo-spacing map as a parameter and returns a CSS variable (custom property) with the actual spacing as a fallback:
// First, import the Default theme.
@import "@progress/kendo-theme-default/dist/all.scss";
.my-element {
padding: k-spacing(4); // Apply level 4 spacing to .my-element.
}
Spacing CSS Variables
Another way to customize the spacing system of the Default theme is to modify the CSS variables as each value in the Sass map is also represented as a CSS variable (custom property) and exposed at the root level:
:root {
--kendo-spacing-2: 6px;
--kendo-spacing-4: 8px;
// Configure more spacing steps
}
Spacing SASS Variables
You can modify either all values in the $kendo-spacing Sass map or only specific spacing steps, for example, level 6:
$kendo-spacing: (
2: 8px,
6: 12px // For example, adjust level 6 spacing.
);
@import "@progress/kendo-theme-default/dist/all.scss";
Typography
To learn how the Telerik and Kendo UI Default theme implements typography see the Typography Overview article.
By defaults, the Default theme does not enable the typography system. To enable it, set the .k-body class to the page <body> element. This class is required for the typography system to work properly on the document level and apply the predefined typography values to the page:
<body class="k-body">
<!-- Your content here -->
</body>
In addition, you need to enable the typography system prior to importing the theme in sass:
// Enable the typography system.
$kendo-enable-typography: true; // Enable the typography system.
// Import the Default theme.
@import "@progress/kendo-theme-default/dist/all.scss";
After enabling the typography system, you can use the predefined typography values in the Default theme which are available in the the $kendo-font-families, $kendo-font-sizes, $kendo-line-heights and $kendo-font-weights sass maps. You can use them as is or customize them to fit your specific design needs.
Border Radii
To learn how the Telerik and Kendo UI Default theme implements border radii see the Border Radii Overview article.
To customize the border radii system in the Telerik and Kendo UI Default theme, use either of the following approaches:
- Use the predefined border radii variables.
- Modify the border radii CSS variables.
- Modify the border radii Sass variables.
Predefined Border Radii Variables
You can use the $kendo-border-radii map as is or customize it to fit your specific design needs. The predefined border radii values in the Default theme are available in the $kendo-border-radii Sass map.
To use the predefined values, the recommended approach is to utilize the k-border-radius() function, which takes a spacing step from the $kendo-border-radii map as a parameter and returns a CSS variable (custom property) with the actual spacing as a fallback:
// First, import the Default theme.
@import "@progress/kendo-theme-default/dist/all.scss";
.my-element {
border-radius: k-border-radius(md); // Apply md border radius to .my-element.
}
Border Radii CSS Variables
Another way to customize the spacing system of the Default theme is to modify the CSS variables as each value in the Sass map is also represented as a CSS variable (custom property) and exposed at the root level:
:root {
--kendo-border-radius-md: 0.5rem;
// Configure more border radii steps
}
Border Radii SASS Variables
You can modify either all values in the $kendo-border-radii Sass map or only specific border radii steps, for example:
$kendo-border-radii: (
md: 0.5rem,
lg: 1rem // For example, adjust lg border radius.
);
@import "@progress/kendo-theme-default/dist/all.scss";
Elevation
To learn how the Telerik and Kendo UI Default theme implements elevation see the Elevation Overview article.
To customize the elevation system in the Telerik and Kendo UI Default theme, use either of the following approaches:
- Use the predefined elevation variables.
- Modify the elevation CSS variables.
- Modify the elevation Sass variables.
Predefined Elevation Variables
You can use the $kendo-elevation map as is or customize it to fit your specific design needs. The predefined elevation values in the Default theme are available in the $kendo-elevation Sass map.
To use the predefined values, the recommended approach is to utilize the k-elevation() function, which takes an elevation step from the $kendo-elevation map as a parameter and returns a CSS variable (custom property) with the actual elevation as a fallback:
// First, import the Default theme.
@import "@progress/kendo-theme-default/dist/all.scss";
.my-element {
box-shadow: k-elevation(3); // Apply default level 3 shadow to .my-element.
}
Elevation CSS Variables
Another way to customize the elevation system of the Default theme is to modify the CSS variables as each value in the Sass map is also represented as a CSS variable (custom property) and exposed at the root level:
:root {
--kendo-elevation-1: 0px 14px 20px rgba(0, 0, 0, 0.2);
--kendo-elevation-2: 0px 11px 48px rgba(0, 0, 0, 0.12);
// Configure more elevation levels
}
Elevation SASS Variables
You can modify either all values in the $kendo-elevation Sass map or only specific elevation levels, for example, level 6:
$kendo-elevation: (
6: (
0px 5px 7px 0px rgba(0, 0, 0, 0.2), // For example, adjust elevation level 6.
0px 3px 14px 0px rgba(0, 0, 0, 0.12),
0px 8px 10px 0px rgba(0, 0, 0, 0.14),
)
);
@import "@progress/kendo-theme-default/dist/all.scss";
