All Components
Components

Components / Styling & Themes

Styling Overview

Kendo UI for Angular provides themes that can be used to style your application.

Currently, the suite ships the following themes:

Installation

  1. To start using the Default or Material theme, install it through NPM.

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

  2. For the Bootstrap theme, which depends on the Bootstrap framework, install the version of the bootstrap framework specified as a peer dependency.

  3. 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 theme for Angular includes an all.css file with precompiled styles that can be used as a ready solution for theming the available Kendo UI components for Angular.

To style your components by using the precompiled CSS options, either include all.css in the application HTML or load all.css along with the component by using its styleUrls property.

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

Loading the Styles along with the Component

When you include the theme with its precompiled CSS through the styleUrls property of the component, the styles will be loaded along with the component. Because the themes contain global styles, make sure that you set the encapsulation property of the component to ViewEncapsulation.None.

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
    // load the default theme (use correct path to node_modules)
    styleUrls: [
        '../../node_modules/@progress/kendo-theme-default/dist/all.css'
    ],

    // prevent style encapsulation
    encapsulation: ViewEncapsulation.None

    selector: 'my-app',
    template: `
        <h1>My First Kendo UI Angular 2 App</h1>
        <button kendoButton [primary]="true">
            My Kendo UI Button
        </button>
    `
})
export class AppComponent { }

Customizing Themes

To customize a Kendo UI theme for Angular, either:

To build a custom theme by using the theme variables, either:

Using the Build Process of the Application

For the complete implementation of this approach, refer to the ng2-dashboard sample application.

  1. Load the Kendo UI Default theme for Angular and import its SCSS sources into your project.

    import { Component, ViewEncapsulation } from '@angular/core';

@Component({
   styleUrls: [
       // load the global application styles
       'styles.scss'
   ],

   // prevent style encapsulation
   encapsulation: ViewEncapsulation.None

   selector: 'my-app',

   template: `
       <h1>My First Kendo UI Angular 2 App</h1>
       <button kendoButton [primary]="true">
           My Kendo UI Button
       </button>
   `
})
export class AppComponent { }
    // styles.scss
@import "~@progress/kendo-theme-default/scss/all";

  2. The setup from the previous example enables you to add or remove theme variables directly in your application. The basic set of variables that you can use to customize your theme is located in the _variables.scss file.

    The following example demonstrates how to style the button in pink by changing the $accent variable before you import the theme.

    $accent: #ff69b4;

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

    To trim down the size of the generated CSS, build only the CSS for the components that you use in your application. To do this, include their source.

    // import only the PanelBar and Grid styles
@import "~@progress/kendo-theme-default/scss/panelbar";
@import "~@progress/kendo-theme-default/scss/grid";

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.

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 build to create the customized version of the themes in the packages/THEME_NAME/dist/all.css file.

    You might want to omit the styles for some components in the CSS output. To include only the styles that you need, run the COMPONENTS='component1,component2' npm run build command. 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.css file which includes only the specified components.

  5. After the build completes, use the compiled CSS.

In this article