Styling Overview

Kendo UI for Vue provide themes that can be used to style your application.

Currently, the suite ships the following themes:

Installation

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:

  1. Run npm install --save @progress/kendo-theme-bootstrap.
  2. Install the version of the bootstrap framework specified as a peer dependency.

After the theme package is installed, reference it in your project.

Including Themes in Your Project

To include a theme in your application, either:

Using Precompiled CSS

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:

Including the Styles in the Application HTML

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" />

Customizing Themes

To modify a Kendo UI for Vue theme, either:

Using the Build Process of the Themes

While 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. This repository contains a build task that compiles the theme sources to CSS. To customize a theme, you can modify the source code of the theme and use the build task to produce a CSS file for your application. This approach avoid the need for a build configuration when compiling SCSS, but may be harder to maintain as the process has to be repeated for every update of the theme.

Previously, the themes were located in independent repositories. To improve the development process, these repositories are now merged in a single kendo-themes repository and the individual GitHub repositories for each theme are archived.

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 install && npx lerna bootstrap.
  3. Customize the theme variables in the packages/<THEME_NAME>/scss/_variables.scss files.
  4. Build the themes with the command npm run sass or npm run dart to create the customized version of the themes in the packages/THEME_NAME/dist/all.css file.
  5. 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:

  1. Clone the kendo-themes GitHub repository.
  2. Install the dependencies for all themes with npm install && npx lerna bootstrap.
  3. Switch the working directory to packages/<THEME_NAME>.
  4. Create a CUSTOM_THEME.scss file in the scss folder. For example, create custom.scss file with the following lines:

    // Import the theme file for the components you use.
    @import "../panelbar/_index.scss";
    @import "../grid/_index.scss";
  5. To build the file, navigate to the theme folder and run gulp sass --file "scss/CUSTOM_THEME.scss".

  6. Include the compiled CSS file in your project. It could be found under dist/CUSTOM_THEME.css.

Customizing Themes with Swatches

A swatch is a set of variables which customizes 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:

  1. Clone the kendo-themes GitHub repository.
  2. Install the node-gyp package.
  3. Install the dependencies for all themes with npm install && npx lerna bootstrap.
  4. Switch the working directory to packages/<THEME_NAME>.
  5. Create a SWATCH_NAME.scss swatch file in the scss/swatches folder.
  6. To build the swatches for the theme by running npm run sass:swatches or npm run dart:swatches.
  7. Include the compiled CSS swatch file in your project. It could be found under dist/SWATCH_NAME.css.

For example, in the Material theme create 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 Default and Bootstrap themes, the swatch should look like:

// Variables.
$primary: blue;
$secondary: pink;

// Import the theme file for the components you use.
@import "../panelbar/_index.scss";
@import "../grid/_index.scss";

// Alternatively, include all components.
@import "../all.scss";

In this article