All Components

Styling Overview

Kendo UI for Angular 2 provides two main options to include the Kendo UI theme in your project.

You can either:

Installation

To start using a theme, install it through npm.

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

Styling Options

Currently, the available theme in the suite is the Default one (@progress/kendo-theme-default).

After its installation, the theme has to be referenced in your project.

Precompiled Themes

To use the precompiled Default theme in your project, you need to include its complete CSS by using styleUrls. This configuration adds the styles for all Kendo UI components for Angular.

@Component({
    selector: 'my-app',
    styleUrls: [
        // load the default theme (use correct path to node_modules)
        '../../node_modules/@progress/kendo-theme-default/dist/all.css'
    ],
    template: `
        <h1>My First Kendo UI Angular 2 App</h1>
        <button kendoButton [primary]=true>
            My Kendo UI Button
        </button>
    `,

})
export class AppComponent { }

Custom Themes

You can change the theme color and sizes of the Default theme and, in this way, build a custom theme from the SCSS sources of the Default one.

Prerequisites

To build a custom theme on top of the Default one, you need to use a bundling tool such as Webpack. Note that projects which are not built by using the Angular CLI Tool require additional Webpack configuration so it can process SCSS files.

{ test: /\.scss$/,
  loaders: [
    'css-loader?sourceMap',
    'sass-loader?sourceMap'
  ]
},
{
  test: /\.(gif|png|woff|woff2|eot|ttf|svg)$/,
  loader: 'url-loader?limit=100000'
}

Configuration

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

    @Component({
       selector: 'my-app',
       styleUrls: [
           // load the global application styles
           'styles.scss'
       ],
       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 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";

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

Only What You Need

Depending on the requirements of your project, you might need to skip some of the components styles. To include only the styles that you need, execute the COMPONENTS='[component]' npm run build inside the kendo-theme-default repository.

The following example demonstrates how to add the Grid and PanelBar components to your project. As a result, the command generates the dist/custom.css file which includes the specified components only.

COMPONENTS='panelbar,grid' npm run build
In this article