Customization

The Telerik UI theme packages include source files for the respective theme and, provide different options for modifying the theme.

You can change the theme colors, remove the CSS of unused components, or use specific theme colors to style your application. The theme source files are located in the scss folder of the theme package.

For the full list of variables that can be modified in a theme, refer to the Using Variables section.

To build a custom theme by using the theme variables, apply any of the following approaches:

• (Recommended) Use the build process of your application—This approach simplifies the upgrades to new theme package versions.
• Use the build process of the themes—This approach requires you to build the theme each time the theme packages are updated.
• Use the Telerik UI ThemeBuilder

Using the Build Process of the Application

To customize a Sass-based theme, create a .scss file and consume the theme package:

1. Obtain the theme source through the NPM package.

   npm install @progress/kendo-theme-default
   

2. Create a .scss file that will consume the theme. For the purposes of the example, this is styles.scss.

3. To build the theme files, import them into the styles.scss file.

   @import "node_modules/@progress/kendo-theme-default/dist/all.scss";
   

   The dist/all file adds the styles for all components that are available in the theme. To trim down the size of the generated CSS, import only the source for the components that you use in your application. Each of them could be found in scss/ folder.

   // Import only the Grid and TreeView styles using Node Sass
   @import "~@progress/kendo-theme-default/scss/grid/_index.scss";
   @import "~@progress/kendo-theme-default/scss/treeview/_index.scss";
   
   // or using Dart Sass
   @import "~@progress/kendo-theme-default/scss/grid/";
   @import "~@progress/kendo-theme-default/scss/treeview/";
   

4. To customize the variables that are used in the theme, change the theme before you import the theme files.

   $primary: #E82C0C; // brand color
   
   @import "~@progress/kendo-theme-default/dist/all.scss";
   

5. Build the styles.scss file through a Sass compiler.

   To use Node Sass (which uses LibSass), install the compiler with npm install node-sass --save and then compile the file with the following command

   node-sass styles.scss styles.css
   

   To use Dart Sass, install the compiler with npm install node-sass@npm:sass --save and then compile the file with the following command

   sass styles.scss styles.css
   

Using the Build Process of the Themes

While each Sass-based theme has a dedicated NPM package (for example, @progress/kendo-theme-default), the source code for all themes is located in the kendo-themes repository which contains a build task that compiles the theme sources to CSS.

To customize a theme, modify the source code of the theme and use the build task to produce a CSS file for your application. This approach avoids the need for a setting up a build configuration when you compile SCSS, but may be harder to maintain as the process has to be repeated each time a theme is updated.

Customizing the Source Code

To create a custom theme by modifying the themes source code:

1. Clone the kendo-themes GitHub repository.
2. Install the dependencies for all themes with npm run setup.
3. Customize the theme variables in the packages/THEME_NAME/scss/_variables.scss files.
4. Build the themes with the npm run sass or npm run dart command to create the customized version of the themes in the packages/THEME_NAME/dist/all.css file.
5. After the build completes, reference the compiled CSS in your application.

Using ThemeBuilder

Progress ThemeBuilder is a web application that enables you to create new or customize existing themes.

For additional information, visit the ThemeBuilder documentation article in the Sass-Themes section.

Using Variables

The following list describes the theme variables available for adjustment in the Kendo UI Default theme.

The following example demonstrates how to use common variables.

Name	Default value	Description
$font-size	14px	Base font size across all components.
$font-family	inherit	Font family across all components.
$font-family-monospace	Consolas, "Ubuntu Mono", "Lucida Console", "Courier New", monospace	Font family for monospaced text. Used for styling the code.
$line-height	(20 / 14)	Line height used along with $font-size.
$border-radius	2px	Border radius for all components.
$accent	#ff6358	The color that focuses the user attention. Used for primary buttons and for elements of primary importance across the theme.
$accent-contrast	#ffffff	The color used along with the accent color denoted by $accent. Used to provide contrast between the background and foreground colors.
$base-text	#656565	The text color of the components' chrome area.
$base-bg	#f6f6f6	The background of the components' chrome area.
$base-border	rgba( black, .08 )	The border color of the components' chrome area.
$base-gradient	$base-bg, darken( $base-bg, 2% )	The gradient background of the components' chrome area.
$hovered-text	#656565	The text color of hovered items.
$hovered-bg	#ededed	The background of hovered items.
$hovered-border	rgba( black, .15 )	The border color of hovered items.
$hovered-gradient	$hovered-bg, darken( $hovered-bg, 2% )	The gradient background of hovered items.
$selected-text	$accent-contrast	The text color of selected items.
$selected-bg	$accent	The background of selected items.
$selected-border	rgba( black, .1 )	The border color of selected items.
$selected-gradient	none	The gradient background of selected items.
$error	#f5503e	The color for error messages and states.
$warning	#fdce3e	The color for warning messages and states.
$success	#5ec232	The color for success messages and states.
$info	#3e80ed	The color for informational messages and states.

The following example demonstrates how to configure the Buttons.

Name	Default value	Description
$kendo-button-text	$base-text	The text color of the buttons.
$kendo-button-bg	$base-bg	The background of the buttons.
$kendo-button-border	k-try-shade( $kendo-button-bg, 2 )	The border color of the buttons.
$kendo-button-gradient	$base-gradient	The background gradient of the buttons.
$kendo-button-hover-text	null	The text color of hovered buttons.
$kendo-button-hover-bg	k-try-shade( $kendo-button-bg, 1 )	The background of hovered buttons.
$kendo-button-hover-border	k-try-shade( $kendo-button-bg, 3 )	The border color of hovered buttons.
$kendo-button-hover-gradient	null	The background gradient of hovered buttons.
$kendo-button-active-text	null	The text color of active buttons.
$kendo-button-active-bg	k-try-shade( $kendo-button-bg, 2 )	The background color of active buttons.
$kendo-button-active-border	k-try-shade( $kendo-button-bg, 4 )	The border color of active buttons.
$kendo-button-active-gradient	none	The background gradient of active buttons.
$kendo-button-focus-shadow	0 0 4px 0 rgba( $kendo-button-border, .75 )	The shadow of focused buttons.

The following example demonstrates how to configure the Charts.

Name	Default value	Description
$series-a	#ff6358	The color of the first series.
$series-b	#ffd246	The color of the second series.
$series-c	#78d237	The color of the third series.
$series-d	#28b4c8	The color of the fourth series.
$series-e	#2d73f5	The color of the fifth series.
$series-f	#aa46be	The color of the sixth series.
$chart-major-lines	rgba(0, 0, 0, .08)	The color of the Chart grid lines (major).
$chart-minor-lines	rgba(0, 0, 0, .04)	The color of the Chart grid lines (minor).

The following example demonstrates how to configure the Toolbar.

Name	Default value	Description
$toolbar-padding-x	$padding-x	The horizontal padding of the container.
$toolbar-padding-y	$padding-x	The vertical padding of the container.