Custom Themes

By customizing themes you can alter the default appearance of the Telerik components so they match the desired color scheme from your designers and fit with the rest of your site's coloring and style.

This article contains the following sections:

To get theme updates and fixes, re-generate the custom themes from the latest built-in base theme when we release a new version of the suite, or when you upgrade the Telerik components in your project.

Using the Sass Theme Builder

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

This article will walk you through the tool and will explain how to use the generated custom theme.

Figure 1: The home screen of the Sass Theme Builder

Blazor Theme Builder home screen

Create New Theme

To create a new theme:

  1. On the initial Sass Theme Builder pane, select the Start Theming option.

  2. Choose one of the existing themes to use as a base.

  3. Select the components which you intend to style. You can also change the selection at a later stage.

    Figure 2: Selecting a base theme and components

    Select Blazor Theme Builder theme and components

  4. Follow the next options in this article to customize the theme

Complex Telerik UI for Blazor components, such as the Grid, rely on other components to deliver their full set of features. If you select the Grid, then all of its components dependencies styles (Button, AutoComplete, DropDownList, DatePicker, etc.) will also be included in the final bundle. The Theme Builder automatically updates the styling on all required components so that you do not need to customize each of them separately.

Modifying Themes

The Sass Theme Builder supports the following options for customization:

  • Color pickers which customize the main aspects of the components' coloring based on your deired color scheme.
    • For the Material theme, there are fewer options as per its guidelines - colors are derived from fewer variables.
  • Predefined color swatches - these are predefined color palettes that you can step on. They were chosen by our design team.
    • They match known Kendo themes such as BlueOpal, Silver, Office365.

The following list describes the Theme Builder UI:

  1. Color Swatches pane - expand it to see the available predefined palettes.
  2. Base Theme name - the name of the theme you step onto.
  3. Color pickers and other controls for customizing the theme.
  4. Link to documentation.
  5. Download the theme when you are done tweaking, so you can reference it in your project.
  6. Selected Components list - you can select which components to include in the preview and the final CSS bundle.

The rest is the Preview pane where you can see the changes in real-time as you make them through the controls on the left.

Figure 3: Theme Builder UI Explained

Blazor Theme Builder UI explained

Import Custom Theme

You can also upload a theme you have previously worked on:

  1. On the initial Sass Theme Builder pane, select Import Theme.
  2. Upload the variables.scss file which contains your current modifications of the customized theme. As a result, the selected components and styling elements load.
  3. Start customizing your theme.

Figure 4: Importing themes for customization

Importing theme in the Blazor Theme Builder

Use The Custom Theme In Your Project

When you complete the modifications and the theme is ready to be used:

  1. Download the theme as a compact archive by clicking the Download button.
  2. Add the THEME_NAME.css file to your application. Save the variables.scss file for future reference in case you need to re-generate the theme again or customize it further.
  3. Include the THEME_NAME.css file in the head tag of your index document.
    • Make sure that this is the only Telerik Theme that is referenced in the application.

Manual Alternative

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 either of the following approaches:

Using the Build Process of the Application

When you want to built the Telerik themes yourself (for example, to combine them with the rest of your styles in to one stylesheet), review the following article first, before continuing with the steps below: https://github.com/telerik/kendo-themes/wiki/Compiling-themes.

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 we update a theme.

You have two options to do that (described in turn below):

  • Customizing Themes with Swatches
  • Customizing the Source Code
  • Creating Custom Components Bundle

Customizing Themes with Swatches

A swatch is a set of variables which customizes the appearance of the theme.

  • Each swatch is placed in a separate file. A theme may contain multiple swatches.
  • Swatches are useful for creating multiple, persistent theme variations.
  • The .css output file can be shared across projects and requires no further processing.

To create a swatch:

  1. Clone the kendo-themes GitHub repository.
  2. Install the node-gyp package.
  3. Install the dependencies for all themes with npm install && npx lerna bootstrap.
  4. Switch the working directory to packages/<THEME_NAME>.
  5. Create a SWATCH_NAME.scss swatch file in the scss/swatches folder.
  6. To build the swatches for the theme by running npm run sass:swatches or npm run dart:swatches.
  7. Include the compiled CSS swatch file in your project. It could be found under dist/SWATCH_NAME.css.

For example, in the Material theme create blue-pink-dark swatch with the following lines:

// Variables.
$primary-palette-name: blue;
$secondary-palette-name: pink;
$theme-type: dark;

// Import the theme file for the components you use.
@import "../panelbar/_index.scss";
@import "../grid/_index.scss";

// Alternatively, include all components.
@import "../all.scss";

For the Default and Bootstrap themes, the swatch should look like:

// Variables.
$primary: blue;
$secondary: pink;

// Import the theme file for the components you use.
@import "../panelbar/_index.scss";
@import "../grid/_index.scss";

// Alternatively, include all components.
@import "../all.scss";

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 install && npx lerna bootstrap.
  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.

Creating Custom Components Bundle

You might want to omit the styles for some components in the CSS output. To include only the styles that you need:

  1. Clone the kendo-themes GitHub repository.
  2. Install the dependencies for all themes with npm install && npx lerna bootstrap.
  3. Switch the working directory to packages/<THEME_NAME>.
  4. Create a CUSTOM_THEME.scss file in the scss folder. For example, create custom.scss file with the following lines:

    // Import the theme file for the components you use.
    @import "../panelbar/_index.scss";
    @import "../grid/_index.scss";
    
  5. To build the file, navigate to the theme folder and run gulp sass --file "scss/CUSTOM_THEME.scss".

  6. Include the compiled CSS file in your project. It could be found under dist/CUSTOM_THEME.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.

Contribution

To contribute to the development of the Kendo UI Default Theme, refer to the telerik/kendo-themes GitHub repository it is stored in.

See Also

In this article
Not finding the help you need? Improve this article