Customizing Themes
Each Kendo UI theme package includes the source files of the theme. You can modify the source files and rebuild the theme as part of your build process. For example, you can change the theme colors, include CSS only for the components you use, or use specific theme colors to style your application. The theme source files are located in the scss
folder of the theme package.
For a list of variables that you can modify in a theme, refer to the customization article about each theme:
- Customize the Default theme
- Customize the Bootstrap theme
- Customize the Material theme
- Customize the Fluent theme
To build a custom theme by using the theme variables, use one of the following options:
- (Recommended) Use the build process of your application (webpack/angular-cli) - this approach simplifies upgrades of component and theme packages.
- Use the build process of the themes - this approach requires you to build the theme each time the theme packages are updated.
For visual editing and preview of the theme, use the ThemeBuilder application. It has a user-friendly interface where you can preview all components and experiment with the versatile color swatches.
Using the Build Process of the Application
To built the Kendo themes yourself (for example, to combine them with the rest of your styles in to one stylesheet), review the Compiling themes article first, before continuing.
To customize a Sass-based theme:
-
Get the theme source through the NPM package.
shnpm install @progress/kendo-theme-default
-
Create a
.scss
file that will consume the theme, for examplestyles.scss
. Theng add
schematics for the Kendo UI packages adds the precompiled CSS file toangular.json
. When you use the SCSS files, you have to remove these references.ts// angular.json "styles": [ "src/styles.scss" ]
-
To build the theme files, import them into the
styles.scss
file.scss// styles.scss @import "@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. You can find each of them in thescss/
folder. -
You can customize theme variables directly in your application. Here is the full list of available theme variables for the Kendo Default theme.
Since
v8.0.0
of the themes a new Color System was introduced bringing a new way of implementing and customizing colors. For more details, refer to the Design System documentation.To customize the color variables that are used in the theme, 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. Note, that you will also need to install the@progress/kendo-theme-core
package to customize the colors:scss// styles.scss @import "@progress/kendo-theme-core/scss/functions/index.import.scss"; $kendo-colors: (); $kendo-colors: k-map-merge( $kendo-colors, k-generate-color-variations("primary", pink, "default") ); @import "@progress/kendo-theme-default/dist/all.scss";
-
You can also customize individual components by overriding their variables:
scss// styles.scss $kendo-panelbar-bg: #1b56b8; $kendo-grid-bg: #1bb822; @import "@progress/kendo-theme-default/scss/panelbar/_index.scss"; @import "@progress/kendo-theme-default/scss/grid/_index.scss";
As of Angular 15, the tilde (
~
) import in theangular-devkit
package is deprecated. For Angular 14 and earlier versions, you can still use the old import statement~@progress/kendo-theme-default/dist/all.scss
.
Using the Build Process of the Themes
Each Kendo UI 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. It 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 to set 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 Themes with Swatches
A swatch is a set of variables that customize the appearance of the theme.
- Each swatch is placed in a separate file. A theme may contain multiple swatches.
- Swatches are useful for creating multiple, persistent theme variations.
- The
.css
output file can be shared across projects and requires no further processing.
To create a swatch:
- Clone the kendo-themes GitHub repository.
- (Windows only) Install the node-gyp prerequisites by running
npm install --global --production windows-build-tools
from an elevated PowerShell or, as Administrator, from the CMD.exe. - Install the dependencies for all themes by running
npm run setup
. - Switch the working directory to
packages/<THEME_NAME>
. - Create a
SWATCH_NAME.scss
swatch file in thescss/swatches
folder. - Type
npm run sass:swatches
ornpm run dart:swatches
to build the swatches for the theme. - Include the compiled CSS swatch file in your project. You can find it under
dist/SWATCH_NAME.css
.
For example, in the Material theme, create a blue-pink-dark
swatch with the following lines:
// Variables.
$primary-palette-name: blue;
$secondary-palette-name: pink;
$theme-type: dark;
// Import the theme file for the components you use.
@import "../panelbar/_index.scss";
@import "../grid/_index.scss";
// Alternatively, include all components.
// @import "../all.scss";
For the rest of the themes, the swatch should look like:
// Variables.
@import "@progress/kendo-theme-core/scss/functions/index.import.scss";
$kendo-colors: ();
$kendo-colors: k-map-merge(
$kendo-colors,
k-generate-color-variations("primary", blue, "default"),
k-generate-color-variations("secondary", pink, "default")
);
// Import the theme file for the components you use.
@import "../panelbar/_index.scss";
@import "../grid/_index.scss";
// Alternatively, include all components.
// @import "../all.scss";
Customizing the Source Code
To create a custom theme by modifying the themes source code:
- Clone the kendo-themes GitHub repository.
- Install the dependencies for all themes with
npm run setup
. - Customize the theme variables in the
packages/THEME_NAME/scss/_variables.scss
files. - Build the themes with the
npm run sass
ornpm run dart
command to create the customized version of the themes in thepackages/THEME_NAME/dist/all.css
file. - After the build completes, use the compiled CSS.
Creating Custom Components Bundle
You might want to omit the styles for some components in the CSS output. To include only the styles that you need:
-
Clone the kendo-themes GitHub repository.
-
Install the dependencies for all themes with
npm run setup
. -
Switch the working directory to
packages/THEME_NAME
. -
Create a
CUSTOM_THEME.scss
file in thescss
folder. An example file could becustom.scss
with the following lines:scss// Import the theme file for the components you use. @import "../panelbar/_index.scss"; @import "../grid/_index.scss";
-
Navigate to the theme folder and run
gulp sass --file "scss/CUSTOM_THEME.scss"
to build the file. -
Include the compiled CSS file in your project. You can find it under
dist/CUSTOM_THEME.css
.
ThemeBuilder
To take full control over the appearance of the Kendo UI for Angular components, you can create your own styles by using ThemeBuilder.
ThemeBuilder is a web application that enables you to create new themes and customize existing ones. Every change that you make is visualized almost instantly. Once you are done styling the Angular components, you can export a zip file with the styles for your theme and use them in your Angular app.