Styling Overview

Kendo UI for Vue provides themes that you can used to style your application.

Currently, Kendo UI for Vue supports the following themes:

• Default theme—Available through the@progress/kendo-theme-default NPM module.
• Bootstrap theme—Available through the@progress/kendo-theme-bootstrap NPM module.
• Material theme—Available through the@progress/kendo-theme-material NPM module.
• Fluent theme—Available through the@progress/kendo-theme-fluent NPM module.
• Classic theme—Available through the@progress/kendo-theme-classic NPM module.

Installation

1. To start using a theme, install its package through NPM. For example, to install the Default theme, run the following command:

   sh

   npminstall--save @progress/kendo-theme-default

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

Including Themes in Your Project

Each theme package provides the two ways for including the theme in your project:

• By using a precompiled CSS file—This approach does not require a build step and is therefore the faster of the two.
• By compiling the theme from SCSS source files—This approach reduces the CSS output and allows you to customize the theme.

Using Precompiled CSS

Each theme includes a precompileddist/all.css CSS file that contains the styles for all Kendo UI for Vue components. To usedist/all.css, reference it in theApp.vue file of the application.

import'@progress/kendo-theme-default/dist/all.css';

While using the precompiled CSS file is faster than compiling the theme from the source code, the approach has the following drawbacks:

• It includes CSS for components that are not used in the application.
• It does not provide options for theme customization through SCSS variables (which is possible when you build the theme from the source code) because the theme is already compiled.

Customizing Themes

Each Kendo UI for Vue theme package includes the source files of the theme which provides options for you to modify and rebuild the theme as part of your build process. For example, 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 thescss folder of the theme package.

For a list of variables that can be modified in a theme, refer to the article on each theme customization:

• Customize the Default theme
• Customize the Bootstrap theme
• Customize the Material theme
• Customize the Fluent theme
• Customize the Classic theme

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

• (Recommended) Use the build process of your application. This approach simplifies upgrades to new component and 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.

For a visual preview of the theme for all components and versatile color swatches, use theThemeBuilder application which provides an interface for theme customization.

Using the Build Process of the Application

• To use Node Sass (which usesLibSass), run thenpm install node-sass --save command.
• To useDart Sass, run thenpm install node-sass@npm:sass --save command.

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

With this setup, you can customize theme variables directly in your application. For example, you can change the default primary color from orange to pink with the following lines:

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

Thedist/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 inscss/ folder.

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

Using the Build Process of the Themes

While each Kendo UI for Vue theme has a dedicated NPM package (for example, @progress/kendo-theme-default), the source code for all themes is located in thekendo-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.

To improve the development process, the previous independent GitHub repositories of each theme were merged in the singlekendo-themes repository and the individual repositories were archived.

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 thekendo-themes GitHub repository.
2. Install thenode-gyp.
3. Install the dependencies for all themes withnpm run setup.
4. Switch the working directory topackages/<THEME_NAME>.
5. Create aSWATCH_NAME.scss swatch file in thescss/swatches folder.
6. To build the swatches for the theme by runningnpm run sass:swatches ornpm run dart:swatches.
7. Include the compiled CSS swatch file in your project. It could be found underdist/SWATCH_NAME.css.

For example, in the Material theme createblue-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.$kendo-color-primary:blue;$kendo-color-secondary:pink;// Import the theme file for the components you use.@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:

1. Clone thekendo-themes GitHub repository.
2. Install the dependencies for all themes withnpm run setup.
3. Customize the theme variables in thepackages/THEME_NAME/scss/_variables.scss files.
4. Build the themes with thenpm run sass ornpm run dart command to create the customized version of the themes in thepackages/THEME_NAME/dist/all.css file.
5. After the build completes, use thecompiled 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 thekendo-themes GitHub repository.

2. Install the dependencies for all themes withnpm run setup.

3. Switch the working directory topackages/<THEME_NAME>.

4. Create aCUSTOM_THEME.scss file in thescss folder. For example, createcustom.scss file with the following lines:

   scss

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

5. To build the file, navigate to the theme folder and rungulp sass --file "scss/CUSTOM_THEME.scss".

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

Using ThemeBuilder

To take full control over the appearance of the Kendo UI for Vue components, you can create your own styles by usingThemeBuilder.

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 Vue components, you can export a zip file with the styles for your theme and use them in your Vue app.

Integrating Tailwind CSS

Tailwind CSS is a popular utility-first CSS framework that provides low-level utility classes for building custom designs directly in your markup. Instead of relying on predefined component styles, Tailwind enables rapid UI development by composing styles using its extensive set of utility classes. This approach allows for greater flexibility and consistency in styling, making it easy to create responsive and modern interfaces.

Kendo UI for Vue componentsintegrate with Tailwind CSS allowing you to enhance or customize their appearance. By combining Tailwind's utility classes with Kendo UI themes, you can achieve a unique look and streamline your styling workflow.

Suggested Links

• Web Font Icons in Kendo UI for Vue
• Getting Started with Kendo UI for Vue - JavaScript (Online Guide)
• Getting Started with Kendo UI for Vue - TypeScript (Online Guide)
• Getting Started with Kendo UI for Vue - JavaScript + Options API (Online Guide)
• Getting Started with Kendo UI for Vue - TypeScript + Options API (Online Guide)
• Getting Started with Kendo UI for Vue - Nuxt 3 (Online Guide)
• Browse the Components