Styling & Themes / Overview /

Styling Overview

Kendo UI for Angular provides themes that you can use to style your application.

Currently, the suite ships the following themes:

Theme name	Theme characteristics	Theme package NPM module
Kendo UI Default theme	Kendo UI own neutral styling	`@progress/kendo-theme-default`
Kendo UI Bootstrap theme	Matches the Bootstrap 4 styling	`@progress/kendo-theme-bootstrap`
Kendo UI Material theme	Follows the Material Design Guidelines	`@progress/kendo-theme-material`
Kendo UI Fluent theme	Follows the Fluent Design System	`@progress/kendo-theme-fluent`

Installation

To start using a theme, install its package through NPM.

# Default theme
npm install --save @progress/kendo-theme-default

# Bootstrap theme
npm install --save @progress/kendo-theme-bootstrap

# Material theme
npm install --save @progress/kendo-theme-material

# Fluent theme
npm install --save @progress/kendo-theme-fluent

After the theme package is installed, reference it in your project. You can include kendo-themes in your project in one of the following ways:
- By using an external (CDN) link;
- By using a precompiled CSS file;
- By compiling the theme from the SCSS source files.

Using External (CDN) Links

The simplest way is to paste a CDN link in the head element of your page. While the Kendo UI for Angular suite does not provide a CDN, you can extract a link from unpkg.

<!-- Default theme -->
<link rel="stylesheet" href="http://unpkg.com/@progress/kendo-theme-default/dist/all.css" />

<!-- Bootstrap theme -->
<link rel="stylesheet" href="http://unpkg.com/@progress/kendo-theme-bootstrap/dist/all.css" />

<!-- Material theme -->
<link rel="stylesheet" href="http://unpkg.com/@progress/kendo-theme-material/dist/all.css" />

<!-- Fluent theme -->
<link rel="stylesheet" href="http://unpkg.com/@progress/kendo-theme-fluent/dist/all.css" />

Using Precompiled CSS

Each Kendo UI theme includes a precompiled dist/all.css CSS file that contains the styles for all Kendo UI components.

node_modules/@progress/kendo-theme-default/dist/all.css

To use dist/all.css, reference it in the angular.json file of the application.

As of the Angular 6 release, the .angular-cli.json file is renamed to angular.json.

{
  "apps": [
    {
      "styles": [
        "node_modules/@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 may not be used in the application.
It does not allow theme customization through SCSS variables (which is possible when you build a theme from the source code) because the theme is already compiled.

Creating Custom Themes with 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.

Compiling Themes from SCSS Source Files

Angular CLI supports the compilation of SCSS files. To compile the theme in your application, import the style files for the components in use.

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

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

It is also possible to include the styles for all available components from the dist/all.scss file . However, this will significantly increase the build time and bundle size of the application.

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

In the angular.json file reference the SASS file where the theme is imported.

"architect": {
    "build": {
      "options": {
        "styles": [
          "src/styles.scss"
        ]
      }
    }
  }

For more information on how to compile and customize the themes, refer to the Customizing Themes section.

Removing Themes from angular.json

The ng add schematics for the Kendo UI packages adds the precompiled CSS file to angular.json. When you use the SCSS files, you have to remove these references.

Mapping Theme SCSS Files to NPM Packages

All Kendo UI components for Angular have a dedicated folder in the Kendo UI themes which contains the SCSS files required for the given component. However, at this point some exceptions exist, for example, the Charts and DateInputs.

The following list shows the CSS packages which are currently needed for a particular NPM package.

// kendo-angular-buttons
@import "~@progress/kendo-theme-default/scss/button/_index.scss";
@import "~@progress/kendo-theme-default/scss/chip/_index.scss";
@import "~@progress/kendo-theme-default/scss/fab/_index.scss";

// kendo-angular-charts
@import "~@progress/kendo-theme-default/scss/dataviz/_index.scss";

// kendo-angular-conversational-ui
@import "~@progress/kendo-theme-default/scss/chat/_index.scss";

// kendo-angular-dateinputs
@import "~@progress/kendo-theme-default/scss/datetime/_index.scss";

// kendo-angular-dialog
@import "~@progress/kendo-theme-default/scss/dialog/_index.scss";
@import "~@progress/kendo-theme-default/scss/window/_index.scss";

// kendo-angular-dropdowns
@import "~@progress/kendo-theme-default/scss/autocomplete/_index.scss";
@import "~@progress/kendo-theme-default/scss/combobox/_index.scss";
@import "~@progress/kendo-theme-default/scss/dropdownlist/_index.scss";
@import "~@progress/kendo-theme-default/scss/dropdowntree/_index.scss";
@import "~@progress/kendo-theme-default/scss/multiselect/_index.scss";

// kendo-angular-gauges
@import "~@progress/kendo-theme-default/scss/dataviz/_index.scss";

// kendo-angular-grid
@import "~@progress/kendo-theme-default/scss/grid/_index.scss";

// kendo-angular-editor
@import "~@progress/kendo-theme-default/scss/editor/_index.scss";

// kendo-angular-icons
@import "~@progress/kendo-theme-default/scss/icons/_index.scss";

// kendo-angular-indicators
@import "~@progress/kendo-theme-default/scss/badge/_index.scss";
@import "~@progress/kendo-theme-default/scss/loader/_index.scss";

// kendo-angular-inputs
@import "~@progress/kendo-theme-default/scss/checkbox/_index.scss";
@import "~@progress/kendo-theme-default/scss/colorpicker/_index.scss";
@import "~@progress/kendo-theme-default/scss/forms/_index.scss";
@import "~@progress/kendo-theme-default/scss/input/_index.scss";
@import "~@progress/kendo-theme-default/scss/maskedtextbox/_index.scss";
@import "~@progress/kendo-theme-default/scss/numerictextbox/_index.scss";
@import "~@progress/kendo-theme-default/scss/radio/_index.scss";
@import "~@progress/kendo-theme-default/scss/slider/_index.scss";
@import "~@progress/kendo-theme-default/scss/switch/_index.scss";
@import "~@progress/kendo-theme-default/scss/textarea/_index.scss";
@import "~@progress/kendo-theme-default/scss/textbox/_index.scss";
@import "~@progress/kendo-theme-default/scss/validator/_index.scss";

// kendo-angular-layout
@import "~@progress/kendo-theme-default/scss/avatar/_index.scss";
@import "~@progress/kendo-theme-default/scss/card/_index.scss";
@import "~@progress/kendo-theme-default/scss/drawer/_index.scss";
@import "~@progress/kendo-theme-default/scss/expansion-panel/_index.scss";
@import "~@progress/kendo-theme-default/scss/panelbar/_index.scss";
@import "~@progress/kendo-theme-default/scss/splitter/_index.scss";
@import "~@progress/kendo-theme-default/scss/stepper/_index.scss";
@import "~@progress/kendo-theme-default/scss/tabstrip/_index.scss";
@import "~@progress/kendo-theme-default/scss/tilelayout/_index.scss";

// kendo-angular-menu
@import "~@progress/kendo-theme-default/scss/menu/_index.scss";

// kendo-angular-navigation
@import "~@progress/kendo-theme-default/scss/appbar/_index.scss";
@import "~@progress/kendo-theme-default/scss/breadcrumb/_index.scss";
@import "~@progress/kendo-theme-default/scss/bottom-navigation/_index.scss";

// kendo-angular-notification
@import "~@progress/kendo-theme-default/scss/notification/_index.scss";

// kendo-angular-pager
@import "~@progress/kendo-theme-default/scss/pager/_index.scss";

// kendo-angular-popup
@import "~@progress/kendo-theme-default/scss/popup/_index.scss";

// kendo-angular-progressbar
@import "~@progress/kendo-theme-default/scss/progressbar/_index.scss";

// kendo-angular-ripple
@import "~@progress/kendo-theme-default/scss/ripple/_index.scss";

// kendo-angular-scrollview
@import "~@progress/kendo-theme-default/scss/scrollview/_index.scss";

// kendo-angular-toolbar
@import "~@progress/kendo-theme-default/scss/toolbar/_index.scss";

// kendo-angular-tooltip
@import "~@progress/kendo-theme-default/scss/tooltip/_index.scss";

// kendo-angular-treelist
@import "~@progress/kendo-theme-default/scss/treelist/_index.scss";

// kendo-angular-treeview
@import "~@progress/kendo-theme-default/scss/treeview/_index.scss";

// kendo-angular-upload
@import "~@progress/kendo-theme-default/scss/dropzone/_index.scss";
@import "~@progress/kendo-theme-default/scss/upload/_index.scss";

Styling Overview

Installation

Using External (CDN) Links

Using Precompiled CSS

Creating Custom Themes with ThemeBuilder

Compiling Themes from SCSS Source Files

Removing Themes from angular.json

Mapping Theme SCSS Files to NPM Packages

Suggested Links

In this article

Not finding the help you need?

Is this article helpful?

Thank you for your feedback!

Getting Started

Support Resources

Community

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Extended Reality

Free Tools

Styling Overview

In this article

Not finding the help you need?

Is this article helpful?

Thank you for your feedback!