Bootstrap

Theme Swatches

A swatch is a color variation of the main Telerik and Kendo UI Bootstrap Theme. All swatches use the same fonts, sizes, and layouts of the main theme. However, they differ in text colors, background colors, and border colors. See Color Swatch to understand the structure, colors, and variable groups of each individual swatch.

Each swatch is a set of variables that modify the main appearance of the Telerik and Kendo UI Bootstrap Theme. To preview and test the Telerik and Kendo UI Bootstrap Theme swatches, visit the live demo site for any of the Telerik or Kendo UI web products. Choose a product, go to its online component demos, and enable the swatch from the Change Theme dropdown above any of the examples.

The table below presents the preset swatches available with the Telerik and Kendo UI Bootstrap Theme.

To apply a theme swatch, use the corresponding reference name from the table above. For more details, see the Using Swatches section.

Using Swatches

Swatches are helpful when creating multiple, persistent theme variations. The fastest way to use a swatch is to reference the swatch stylesheets that are located on a CDN. Alternatively, you can import the styles of the swatch after installing the main theme.

Using the CDN Link

Load a swatch by Using the CDN link. Reference the precompiled CSS file URL for the required theme version and swatch in the head section of your application, for example:

<link
  rel="stylesheet"
  href="https://unpkg.com/@progress/kendo-theme-bootstrap@10.0.0/dist/bootstrap-nordic.css"
/>

Installing the NPM Package

The swatches for each theme are distributed with the main package used to install the theme. For more information, see Installing the Bootstrap Theme. To use a swatch in your application, import it into your project styles:

// Import the Bootstrap theme and its Nordic swatch.
@use "@progress/kendo-theme-bootstrap/dist/bootstrap-nordic.scss" as *;

Creating New Swatches

The fastest way to create a new swatch based on your custom preferences, is to use the Kendo Color System. To learn how the Telerik and Kendo UI Bootstrap theme implements colors through its color system, see the Color Overview article.

To customize the color system in the Telerik and Kendo UI Bootstrap theme swatches, you can use either of the following options:

• Color CSS Variables
• Color Sass Variables

Color CSS Variables

One way to fully or partially customize a swatch of the Bootstrap theme is to modify the CSS variables as each value in the Sass map is also represented as a CSS variable (custom property) and exposed at the root level. To learn more, see Customizing Color CSS Variables:

:root {
  --kendo-color-primary-subtle: #ffeceb;
  --kendo-color-primary-subtle-hover: #ffdedb;
  --kendo-color-primary-subtle-active: #ffc8c4;
  --kendo-color-primary: #ff6358;
  --kendo-color-primary-hover: #ea5a51;
  // Configure more swatch colors
  // ...
}

Color Sass Variables

You can modify the colors of an existing swatch in two ways:

• By modifying its $kendo-colors map:

@use "sass:map";
@use "@progress/kendo-theme-bootstrap/dist/bootstrap-nordic.scss" as * with (
  $kendo-colors: ( primary: #ff6358 )
);

• By modifying all values of the Bootstrap theme swatch and using the k-generate-color-variations function to generate a swatch with only a few lines of code. To learn more, see Customizing Color Sass Variables.

The provided code below demonstrates the complete color customization of the Telerik and Kendo UI Bootstrap theme, resulting in a new custom-made theme swatch variation.

@use "sass:map";
@use "@progress/kendo-theme-bootstrap/scss/index.scss" as *;

$kendo-colors: map.merge($kendo-colors, ( app-surface: #f8f8f8, on-app-surface: #111111, subtle: rgba(0, 0, 0, 0.54)));
$kendo-colors: map.merge($kendo-colors, k-generate-color-variations('base', #f5f5f5, 'bootstrap'));
$kendo-colors: map.merge($kendo-colors, k-generate-color-variations('primary', #ff6358, 'bootstrap'));
$kendo-colors: map.merge($kendo-colors, k-generate-color-variations('secondary', #666666, 'bootstrap'));
$kendo-colors: map.merge($kendo-colors, k-generate-color-variations('tertiary', #03a9f4, 'bootstrap'));
$kendo-colors: map.merge($kendo-colors, k-generate-color-variations('light', #ebebeb, 'bootstrap'));
$kendo-colors: map.merge($kendo-colors, k-generate-color-variations('dark', #3d3d3d, 'bootstrap'));
$kendo-colors: map.merge($kendo-colors, k-generate-color-variations('inverse', #3d3d3d, 'bootstrap'));
$kendo-colors: map.merge($kendo-colors, k-generate-color-variations('info', #0058e9, 'bootstrap'));
$kendo-colors: map.merge($kendo-colors, k-generate-color-variations('success', #37b400, 'bootstrap'));
$kendo-colors: map.merge($kendo-colors, k-generate-color-variations('warning', #ffc000, 'bootstrap'));
$kendo-colors: map.merge($kendo-colors, k-generate-color-variations('error', #f31700, 'bootstrap'));
$kendo-colors: map.merge($kendo-colors, k-generate-color-variations('series-a', #ff6358, 'bootstrap'));
$kendo-colors: map.merge($kendo-colors, k-generate-color-variations('series-b', #ffe162, 'bootstrap'));
$kendo-colors: map.merge($kendo-colors, k-generate-color-variations('series-c', #4cd180, 'bootstrap'));
$kendo-colors: map.merge($kendo-colors, k-generate-color-variations('series-d', #4b5ffa, 'bootstrap'));
$kendo-colors: map.merge($kendo-colors, k-generate-color-variations('series-e', #ac58ff, 'bootstrap'));
$kendo-colors: map.merge($kendo-colors, k-generate-color-variations('series-f', #ff5892, 'bootstrap'));

@include kendo-theme--styles();