Sass-Based Themes
As of the R1 2017 release, the Kendo UI distribution includes Sass-based themes.
Currently, Kendo UI delivers the following Sass themes:
- Kendo UI Default v.2—The latest update of the Kendo UI Default theme.
- Kendo UI Bootstrap v.4—To achieve similarity with the Bootstrap look and feel, the theme has linked variables to Bootstrap. This means that customizing the original Bootstrap theme will affect the Kendo UI theme as well.
- Kendo UI Material—An update of the Kendo UI Material Theme to closely implement the Material Design Guidelines.
Less- vs. Sass-Based Themes
Apart from being written in a different language, the Sass-based themes are slightly different from the Less-based ones. This article outlines those differences and demonstrates how to use the Sass-based themes.
In Kendo UI, the Sass-based themes demonstrate the following differences from the Less-based ones:
- Each Sass-based theme is represented by a single CSS file that combines the layout and the themes of the components. As a result, you do not need to match a theme with its common file.
- Based on the widget you work with, the Sass-based themes can build a part of the widget theme in a similar way the Download Builder trims unused scripts.
- The Sass-based themes are available on NPM. Each theme is stored as an NPM package and can be easily upgraded.
- Each Sass-based theme is compatible with the Kendo UI components for Angular. This enables you to port parts of your application to Angular 2 while maintaining their styling.
Browser Limitations
The following CSS features, which are used by the Sass-based themes, provide limited browser support:
- Flexbox layout—Not supported by Internet Explorer 10 and earlier.
- CSS gradients—Not supported by Internet Explorer 9 and earlier.
- Web Open Font Format—Not supported by Internet Explorer 8 and earlier.
- Border radius—Not supported by Internet Explorer 8 and earlier.
- Alpha transparency colors—Not supported by Internet Explorer 8 and earlier.
Getting the Themes
To get the Sass-based Kendo UI themes, you can:
- Use the pre-build CSS files.
- Use the NPM packages.
Using Pre-Built CSS
To get a complete theme by using its pre-built CSS files, apply either of the following approaches:
- Use the CSS files that are shipped with the Kendo UI distribution. For example, the Default v2 theme is distributed as
styles/kendo.default-v2.min.css. - Use the NPM package which contains a pre-built
dist/all.cssCSS file for the theme. For more information on how to obtain the NPM package, refer to the following section on using NPM packages.
Using NPM Packages
The Kendo UI Sass-based themes are located on the Progress NPM registry:
- Kendo UI Default Theme—Available as @progress/kendo-theme-default.
- Kendo UI Bootstrap v4 Theme—Available as @progress/kendo-theme-bootstrap.
- Kendo UI Material Theme—Available as @progress/kendo-theme-material.
To access the Progress NPM registry, you need an active Telerik account with an active commercial license. For more information on how to access the NPM registry, refer to the installation instructions for Kendo UI Professional.
Customizing the Themes
To customize a Sass-based theme, use any of the following approaches:
To contribute to the development of the Kendo UI Default Theme, refer to the telerik/kendo-themes GitHub repository it is stored in.
Creating SCSS Files
To customize a Sass-based theme, create a .scss file and consume the theme package in the following way:
-
Obtain the theme source through the NPM package.
npm install @progress/kendo-theme-default Create a
.scssfile that will consume the theme. For the purposes of the this example, this isstyles.scss.-
To build the theme files, import them into the file.
@import "node_modules/@progress/kendo-theme-default/scss/all";To include the styles of specific widgets, use their names in the path.
@import "node_modules/@progress/kendo-theme-default/scss/grid"; @import "node_modules/@progress/kendo-theme-default/scss/treeview"; -
To customize the variables that are used in the theme, change the theme before you import the theme files.
$accent: #E82C0C; // brand color @import "node_modules/@progress/kendo-theme-default/scss/all"; -
Build the
styles.scssfile through a Sass compiler. For example, usenode-sass.node-sass styles.scss styles.css
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 | Default 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. |
| $hovered-text | #656565 | The text color of hovered items. |
| $hovered-bg | #ededed | The background of hovered items. |
| $hovered-border | rgba( black, .15 ) | The border color of hovered items. |
| $hovered-gradient | $hovered-bg, darken( $hovered-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 | Default value | Description |
|---|---|---|
| $button-text | $base-text | The text color of the buttons. |
| $button-bg | $base-bg | The background of the buttons. |
| $button-border | $base-border | The border color of the buttons. |
| $button-gradient | $base-gradient | The background gradient of the buttons. |
| $button-hovered-text | $hovered-text | The text color of hovered buttons. |
| $button-hovered-bg | $hovered-bg | The background of hovered buttons. |
| $button-hovered-border | $hovered-border | The border color of hovered buttons. |
| $button-hovered-gradient | $hovered-gradient | The background gradient of hovered buttons. |
| $button-pressed-text | $selected-text | The text color of pressed buttons. |
| $button-pressed-bg | $selected-bg | The background color of pressed buttons. |
| $button-pressed-border | $selected-border | The border color of pressed buttons. |
| $button-pressed-gradient | none | The background gradient of pressed buttons. |
| $button-focused-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 | Default 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.
| Name | Default value | Description |
|---|---|---|
| $toolbar-padding-x | $padding-x | The horizontal padding of the container. |
| $toolbar-padding-y | $padding-x | The vertical padding of the container. |
Using Mixins
-
exports—Outputs a module once, no matter how many times it is included. - Parameters—
name: Stringwhich represents the name of the exported module.
Using the Sass Theme Builder
Progress Sass Theme Builder for Kendo UI is an Angular web application that enables you to create new or customize existing themes.
The tool renders the same look and feel as the look and feel of all other components in the suite. It also delivers full control over the skin elements of each component and automatically updates its composite units. After you create the skin and achieve the desired look of the theme, the Sass Theme Builder enables you to download and integrate it in your project.
Figure 1: A preview of the Sass Theme Builder
Using Newly Created Themes
To create a new theme:
- On the initial Sass Theme Builder pane, select the Start Theming option.
-
Choose one of the existing skins to use as a base. The currently available built-in skins are Default and Bootsrap.
Figure 2: Selecting a base theme
Modifying Themes
The Sass Theme Builder supports the following options for customization:
- Color pickers which customize the appearance of the components.
- The Apply changes instantly option which enables you to observe the changes on the fly.
- Manual updates of each component element.
- Utilization of predefined color swatches.
To customize an existing theme, use the following Sass Theme Builder features:
- Color swatches—Contains predefined color palettes that you can apply to all components in your application.
- Default—Provides the applicable color customization options.
- Preview components—Keeps the main view of the components. It reflects the customization changes you make each time you add or remove theme elements.
- Download—Downloads the archive that holds the generated style files after the customization completes. When you click the button, a dialog appears and prompts you to name your theme.
Figure 3: Available options for customization
To upload an existing theme you have previously created:
- On the initial Sass Theme Builder pane, select Import Theme.
- Upload the
variables.scssfile which contains your current modifications of the customized theme. As a result, the selected components and styling elements load. - Start customizing your theme.
Figure 4: Importing themes for customization
When you complete the modifications and the theme is ready to be used:
- Download the theme as a compact archive by clicking the Download button.
- Add the newly created
Themefolder to your application. - Include the
all.cssfile in theheadtag of your HTML document.
Avoid referencing the
kendo.common.min.cssandkendo.rtl.min.cssfiles because the exported CSS file contains all styles you need.