All Components

Styling Overview

Kendo UI for Angular provides 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 Bootstrap 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:

Precompiled CSS

Every theme includes a CSS file for theming all available components.

You can use this file either by:

Include CSS in the Application HTML

You can include the theme in the HTML that hosts your application just like any other HTML page.

<link rel="stylesheet" href="/node_modules/@progress/kendo-theme-default/dist/all.css" />

Load Styles along with the Component

You can include the CSS through the styleUrls property of the component. When you use this approach, the styles are 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 { }

Custom Themes

The easiest way to build custom themes is to use the Theme Builder application which provides an interface for theme customization.

Alternatively, you can build custom themes by changing the colors and sizes of the provided themes. Every theme provides a list of available variables that can be used for its customization.

For detailed information, refer to the:

To build a custom theme, you can apply either of the following approaches:

Use the Build Process of the 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 a lovely pink color by changing the $accent variable before importing 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 used 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";

    For a runnable example that demonstrates this approach, refer to the ng2-dashboard sample application.

Use the Build Process of the Theme

Theme repositories provide a build task that compiles their source to CSS.

To customize and build the theme:

  1. Clone the theme repository.
  2. Install the theme dependencies with npm install.
  3. Customize the theme variables in the scss/_variables.scss file.
  4. Build the theme with npm run build to create the customized version of the theme in the dist/all.css file.

    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 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.

After the build completes, use the built CSS as shown in the precompiled CSS section.

In this article