Styles & Appearance / Sass Themes

New to Kendo UI for jQuery? Download free 30-day trial

Customization

Each Kendo UI theme package includes the source files of the respective theme and, thus, 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 the scss folder of the theme package.

For the full list of variables that can be modified in a theme, refer to the Using Variables section.

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

Using the Build Process of the Application

To customize a Sass-based theme, create a .scss file and consume the theme package in the following way:

  1. Obtain the theme source through the NPM package.

    npm install @progress/kendo-theme-default

  2. Create a .scss file that will consume the theme. For the purposes of the example, this is styles.scss.

  3. To build the theme files, import them into the styles.scss file.

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

    The dist/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 in scss/ folder.

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

// or using Dart Sass
@import "~@progress/kendo-theme-default/scss/grid/";
@import "~@progress/kendo-theme-default/scss/treeview/";

  4. To customize the variables that are used in the theme, change the theme before you import the theme files.

    $primary: #E82C0C; // brand color

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

  5. Build the styles.scss file through a Sass compiler.

    To use Node Sass (which uses LibSass), install the compiler with npm install node-sass --save and then compile the file with the following command

    node-sass styles.scss styles.css

    To use Dart Sass, install the compiler with npm install node-sass@npm:sass --save and then compile the file with the following command

    sass styles.scss styles.css

Using the Build Process of the Themes

While each Sass-based 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 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.

Customizing the Source Code

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 run setup.
  3. Customize the theme variables in the packages/THEME_NAME/scss/_variables.scss files.
  4. Build the themes with the npm run sass or npm run dart command to create the customized version of the themes in the packages/THEME_NAME/dist/all.css file.
  5. After the build completes, reference the compiled CSS in your application.

Using the ThemeBuilder

Progress Sass Theme Builder for Kendo UI is an Angular web application that enables you to create new or customize existing themes.

For additional information, visit the ThemeBuilder documentation article in the Sass-Themes section.

Using Variables

The following list describes the theme variables available for adjustment in the Kendo UI Default theme.

The following example demonstrates how to use common variables.

Name Sample value Description
$font-size 14px Base font size across all components.
$font-family inherit Font family across all components.
$font-family-monospace Consolas, "Ubuntu Mono", "Lucida Console", "Courier New", monospace Font family for monospaced text. Used for styling the code.
$line-height (20 / 14) Line height used along with $font-size.
$border-radius 2px Border radius for all components.
$accent #ff6358 The color that focuses the user attention.
Used for primary buttons and for elements of primary importance across the theme.
$accent-contrast #ffffff The color used along with the accent color denoted by $accent.
Used to provide contrast between the background and foreground colors.
$base-text #656565 The text color of the components' chrome area.
$base-bg #f6f6f6 The background of the components' chrome area.
$base-border rgba( black, .08 ) The border color of the components' chrome area.
$base-gradient $base-bg, darken( $base-bg, 2% ) The gradient background of the components' chrome area.
$hover-text #656565 The text color of hovered items.
$hover-bg #ededed The background of hovered items.
$hover-border rgba( black, .15 ) The border color of hovered items.
$hover-gradient $hover-bg, darken( $hover-bg, 2% ) The gradient background of hovered items.
$selected-text $accent-contrast The text color of selected items.
$selected-bg $accent The background of selected items.
$selected-border rgba( black, .1 ) The border color of selected items.
$selected-gradient none The gradient background of selected items.
$error #f5503e The color for error messages and states.
$warning #fdce3e The color for warning messages and states.
$success #5ec232 The color for success messages and states.
$info #3e80ed The color for informational messages and states.

The following example demonstrates how to configure the Buttons.

Name Sample value Description
$kendo-button-text $base-text The text color of the buttons.
$kendo-button-bg $base-bg The background of the buttons.
$kendo-button-border $base-border The border color of the buttons.
$kendo-button-gradient $base-gradient The background gradient of the buttons.
$kendo-button-hover-text $hover-text The text color of hovered buttons.
$kendo-button-hover-bg $hover-bg The background of hovered buttons.
$kendo-button-hover-border $hover-border The border color of hovered buttons.
$kendo-button-hover-gradient $hover-gradient The background gradient of hovered buttons.
$kendo-button-pressed-text $selected-text The text color of pressed buttons.
$kendo-button-pressed-bg $selected-bg The background color of pressed buttons.
$kendo-button-pressed-border $selected-border The border color of pressed buttons.
$kendo-button-pressed-gradient none The background gradient of pressed buttons.
$kendo-button-focus-shadow 0 3px 4px 0 rgba(0, 0, 0, .06) The shadow of focused buttons.

The following example demonstrates how to configure the Charts.

Name Sample value Description
$series-a #ff6358 The color of the first series.
$series-b #ffd246 The color of the second series.
$series-c #78d237 The color of the third series.
$series-d #28b4c8 The color of the fourth series.
$series-e #2d73f5 The color of the fifth series.
$series-f #aa46be The color of the sixth series.
$chart-major-lines rgba(0, 0, 0, .08) The color of the Chart grid lines (major).
$chart-minor-lines rgba(0, 0, 0, .04) The color of the Chart grid lines (minor).

The following example demonstrates how to configure the Toolbar.

Using Primitives

The Kendo UI components use primitives, meaning that different HTML elements in different components use the same CSS classes to provide a level of abstraction and allow common styling.

You can use some CSS classes to apply borders and background colors to containers—for example, k-info-colored, k-success-colored, and k-error-colored. For more examples, refer to the Styling Panels demo.

Common CSS Classes

Name Sample value Description
$toolbar-padding-x 
$padding-x

The horizontal padding of the container.
$toolbar-padding-y 
$padding-x

The vertical padding of the container.
CSS Class Behavior
k-widget The class is applied to the component wrapper to set a border, text and background color. In addition to k-widget, every component has its own specific CSS class, such as k-menu, k-panelbar, k-tabstrip, and so on.
k-header Applied to Grid headers, Menu top level items, PanelBar top level items, TabStrip items, and DropDownLists to set a background image and a background color.
k-link Applied to hyperlinks and clickable text items to set a text color.
k-button Applied to elements that are expected to look like push buttons. The class sets a text color, background color, background image, and hover styling. This is the recommended class for styling form buttons.
k-input Applied to textboxes inside input components like ComboBox and AutoComplete to set border, text and background color.
k-textbox Same as k-input, but used for standalone (generic) input elements that are not part of a component. This is the recommended class for styling form input elements as it provides the same look, height, and vertical alignment as the Kendo UI input components.
k-checkbox Applied to checkboxes inside the TreeView component, when checkboxes are enabled for it.
k-group and k-content Applied to various containers to set a background and border color.
k-popup Applied to popup containers that are detached from their opener component and are placed in the body element.
k-icon and k-sprite Applied to elements that display part of a sprite image as background to initialize their dimensions.
k-image Applied to inline images to set their dimensions.
k-item Applied to various repeating component items, for example, Menu, TabStrip, TreeView, PanelBar, ComboBox, DropDownList, and so on. This CSS class does not apply any particular global styles and sports display: block.
k-first and k-last Set on the first and the last k-item respectively, where a special type of styling is needed, for example, rounded corners and removing borders.

The k-state Classes

The appearance of a component may well depend on its state, which is also tied to CSS classes.

k-state Class Behavior
k-state-default This class is applied on items to set their default appearance background and colors.
k-state-hover Set to items when they are hovered to apply their hovered look.
k-state-focused Applied on focused, mostly input elements and the DropDownList.
k-state-active Set on activated k-link elements.
k-state-selected Set to selected items to apply their selected look like in the PanelBar and TabStrip.
k-state-disabled Applied to disabled items.
k-state-error Can be used with form fields that have an invalid value.

Overriding Primitives

Usually, a CSS property that is defined by a primitive class is used by all components which use that class, unless overridden by a higher specificity selector.

.k-link {
    color: blue;
}

The previous code snippet will not affect the following setting because the latter uses a descendant selector and is therefore more specific (20 versus 10, to be precise).

.k-panelbar .k-link {
    color: red;
}

For more information about the CSS specificity, refer to this article in the Smashing Magazine.

To override the styling for a given component type, you can use a CSS selector with the CSS class of the component. Make sure to register the custom rules after the respective theme CSS files. Otherwise, you have to use higher specificity and longer complex CSS selectors.

.k-menu .k-link {
    color: red;
}

To customize the appearance of a particular component instance, you need a custom CSS class or ID, and include it in the CSS selectors. The Menu from the following example can be styled by using its ID. The CSS rule will not affect any other component instances which are outside #menu1.

<ul id="menu1" class="k-widget k-menu">
    <!-- menu items here -->
</ul>

// Style the Menu by its id.
#menu1 .k-link {
    color: red;
}
In this article
Related articles
Not finding the help you need? Improve this article