Default

Theme Swatches

A swatch is a color variation of the main Telerik and Kendo UI Default 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 Default Theme. To preview and test the Telerik and Kendo UI Default 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 Default Theme.

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

Ocean Blue Accessibility Swatch

The Web Content Accessibility Guidelines sections 1.4.3 Contrast (Minimum) and 1.4.6 Contrast (Enhanced) define contrast ratios for accessibility compliance. The Default Ocean Blue A11y theme swatch conforms to WCAG Level AA, which requires contrast ratios of at least:

• 4.5:1 for normal text
• 3:1 for large text

To preview and test the Default Ocean Blue A11y swatch, visit the live demos of any of the Telerik or Kendo UI web products. When on the chosen demo site, enable the swatch from the Change Theme dropdown above any of the examples.

The Default Ocean Blue A11y swatch is built on top of the Default Ocean Blue swatch. The main difference is that the Ocean Blue A11y swatch has high-contrast focus indicators to comply with WCAG requirements.

The Ocean Blue Accessibility swatch is available starting from Themes version 6.0.3.

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-default@10.0.0/dist/default-ocean-blue-a11y.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 Default Theme. To use a swatch in your application, import it into your project styles:

// Import the Default theme and its Ocean Blue A11y swatch.
@use "@progress/kendo-theme-default/dist/default-ocean-blue-a11y.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 Default theme implements colors through its color system, see the Color Overview article.

To customize the color system in the Telerik and Kendo UI Default 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 Default 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-default/dist/default-ocean-blue-a11y.scss" as * with (
  $kendo-colors: ( primary: #ff6358 )
);

• By modifying all values of the Default 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 Default theme, resulting in a new custom-made theme swatch variation.

@use "sass:map";
@use "@progress/kendo-theme-default/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, 'default'));
$kendo-colors: map.merge($kendo-colors, k-generate-color-variations('primary', #ff6358, 'default'));
$kendo-colors: map.merge($kendo-colors, k-generate-color-variations('secondary', #666666, 'default'));
$kendo-colors: map.merge($kendo-colors, k-generate-color-variations('tertiary', #03a9f4, 'default'));
$kendo-colors: map.merge($kendo-colors, k-generate-color-variations('light', #ebebeb, 'default'));
$kendo-colors: map.merge($kendo-colors, k-generate-color-variations('dark', #3d3d3d, 'default'));
$kendo-colors: map.merge($kendo-colors, k-generate-color-variations('inverse', #3d3d3d, 'default'));
$kendo-colors: map.merge($kendo-colors, k-generate-color-variations('info', #0058e9, 'default'));
$kendo-colors: map.merge($kendo-colors, k-generate-color-variations('success', #37b400, 'default'));
$kendo-colors: map.merge($kendo-colors, k-generate-color-variations('warning', #ffc000, 'default'));
$kendo-colors: map.merge($kendo-colors, k-generate-color-variations('error', #f31700, 'default'));
$kendo-colors: map.merge($kendo-colors, k-generate-color-variations('series-a', #ff6358, 'default'));
$kendo-colors: map.merge($kendo-colors, k-generate-color-variations('series-b', #ffe162, 'default'));
$kendo-colors: map.merge($kendo-colors, k-generate-color-variations('series-c', #4cd180, 'default'));
$kendo-colors: map.merge($kendo-colors, k-generate-color-variations('series-d', #4b5ffa, 'default'));
$kendo-colors: map.merge($kendo-colors, k-generate-color-variations('series-e', #ac58ff, 'default'));
$kendo-colors: map.merge($kendo-colors, k-generate-color-variations('series-f', #ff5892, 'default'));

@include kendo-theme--styles();