Kendo UI for Vue provide themes that can be used to style your application.
Currently, the suite ships the following themes:
Kendo UI Default theme which is available through the
Kendo UI Bootstrap theme which is available through the
To start using a theme, install it through NPM.
npm install --save @progress/kendo-theme-default
The Kendo UI Bootstrap theme depends on the Twitter Bootstrap framework. To install the theme:
npm install --save @progress/kendo-theme-bootstrap.
- Install the version of the
bootstrapframework specified as a peer dependency.
After the theme package is installed, reference it in your project.
To include a theme in your application, either:
- Use the precompiled
- Customize the theme styles by loading the theme source files through the application build process.
Each Kendo UI for Vue theme includes an
all.css file with precompiled styles that can be used as a ready solution for theming the available Kendo UI Wrappers.
To style your components by using the precompiled CSS options, either:
all.cssin the application HTML, or
all.cssalong with the component by using its
To include the theme with its precompiled CSS in the HTML which hosts your application, use a similar approach to the approach you use to any other HTML page.
<link rel="stylesheet" href="/node_modules/@progress/kendo-theme-default/dist/all.css" />
To modify a Kendo UI for Vue theme, either:
- Use the Theme Builder application which provides an interface for theme customization, or
Use the variables of each theme to customize its colors and sizes and build a custom theme.
To utilize the customizable theme variables, refer to the lists of:
To build a custom theme, Use the build process of the theme. This approach requires you to build the theme once and then use the compiled CSS each time the component packages get updated.
Theme repositories provide a build task that compiles their source to CSS.
To customize and build the theme:
- Clone the theme repository.
- Install the theme dependencies with
- Customize the theme variables in the
Build the theme with
npm run buildto create the customized version of the theme in the
You might need to skip the styles for some of the components. To include only the styles that you need, run the
COMPONENTS='component1,component2' npm run buildcommand. For example, to create a CSS file that includes only the Grid and PanelBar styles, run
COMPONENTS='panelbar,grid' npm run build. The command creates the
dist/custom.cssfile which includes only the specified components.
After the build completes, use the compiled CSS.