---
title: Swatches
position: 4
seo_title: Telerik and Kendo UI Meridian Theme Swatches
seo_description: Learn what swatches are used across the Telerik and Kendo UI
  Meridian theme, how to use them, and how to create custom swatches by editing
  the variables that modify the default Telerik and Kendo UI Meridian theme
  appearance.
---

## Theme Swatches

A swatch is a color variation of the main Telerik and Kendo UI Meridian 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](/foundation/color/swatch/) to understand the structure, colors, and variable groups of each individual swatch.

Each swatch is a set of variables that modifies the main appearance of the Telerik and Kendo UI Meridian theme. To preview and test the Telerik and Kendo UI Meridian theme swatches, visit the [live demo site for any of the Telerik or Kendo UI web products](https://www.telerik.com/support/demos). 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 Meridian theme.

| **Meridian Theme Swatch Name** | **Reference Name**     |
| ------------------------------ | ---------------------- |
| Main                           | `meridian-main`        |
| Main Dark                      | `meridian-main-dark`   |

To apply a theme swatch, use the corresponding reference name from the table above. For more details, see the [Using Swatches](/themes/kendo-themes/meridian/swatches/#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](/themes/kendo-themes/meridian/#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:

```html
<link
  rel="stylesheet"
  href="https://unpkg.com/@progress/kendo-theme-meridian@$THEME_VERSION/dist/meridian-main-dark.css"
/>
```

#### Installing the NPM Package

The swatches for the Meridian theme are distributed with the main package used to install the theme. For more information, see [Installing the Meridian Theme](/themes/kendo-themes/meridian/#installing-the-npm-package).
To use a swatch in your application, import it into your project styles:

```scss
// Import the Meridian theme and its Main Dark swatch.
@use '@progress/kendo-theme-meridian/dist/meridian-main-dark.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 Meridian theme implements colors through its color system, see the [Color Overview](/foundation/color/) article.

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

- [Color CSS Variables](#color-css-variables)
- [Color Sass Variables](#color-sass-variables)

#### Color CSS Variables

One way to fully or partially customize a swatch of the Meridian 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](/themes/kendo-themes/meridian/customization/#color-css-variables).

##### Full Swatch Customization

The example below demonstrates a complete CSS-only swatch by overriding all main color group tokens, the surface colors, and the series token for data visualization. Because the theme derives all related tokens through CSS relative colors, this is all you need to produce a fully customized swatch variation:

```css
:root {
  /* Surface colors */
  --kendo-color-app-surface: #fcfbff;
  --kendo-color-on-app-surface: #211a2f;
  --kendo-color-subtle: rgba(33, 26, 47, 0.64);

  /* Main color groups — derived tokens update automatically */
  --kendo-color-base: oklch(93.91% 0.0136 289.1deg);
  --kendo-color-primary: oklch(55.24% 0.1838 293.54deg);
  --kendo-color-secondary: oklch(56.35% 0.1563 250.98deg);
  --kendo-color-tertiary: oklch(62.69% 0.0959 196.39deg);
  --kendo-color-info: oklch(56.35% 0.1563 250.98deg);
  --kendo-color-success: oklch(52.35% 0.1379 152.53deg);
  --kendo-color-warning: oklch(78.06% 0.1556 72.12deg);
  --kendo-color-error: oklch(56.29% 0.2028 24.58deg);

  /* Data visualization — all series letter and intensity variants derive from this */
  --kendo-color-series: oklch(55.24% 0.1838 293.54deg);
}
```

#### Color Sass Variables

You can modify the colors of an existing swatch by overriding the `$kendo-colors` Sass map. Starting with Kendo Themes v14, all derived tokens (hover, active, subtle, emphasis, on-surface, etc.) are generated automatically through CSS relative colors — you only need to set the main tokens.

##### Full Swatch Customization

The example below demonstrates a complete Sass-based swatch by overriding all main color group tokens, the surface colors, and the series token for data visualization:

```scss
@use '@progress/kendo-theme-meridian/scss/all.scss' as * with (
  $kendo-colors: (
    app-surface: #fcfbff,
    on-app-surface: #211a2f,
    subtle: rgba(33, 26, 47, 0.64),
    base: #ebe7f5,
    primary: #7f56d9,
    secondary: #1f7ae0,
    tertiary: #00a3a3,
    info: #1f7ae0,
    success: #198754,
    warning: #ffb100,
    error: #dc3545,
    series: #7f56d9,
  )
);
```

<Notification data='{"type":"info","content":"The k-generate-color-variations() function will be removed in a future release of the themes. For new swatch customization scenarios, use CSS variables and the relative-color token approach instead."}'>The k-generate-color-variations() function will be removed in a future release of the themes. For new swatch customization scenarios, use CSS variables and the relative-color token approach instead.</Notification>

In previous versions, the `k-generate-color-variations()` function was required to generate all shades of a color group from a single value. With the introduction of CSS relative colors in v14.0.0, this generation is now built-in — the theme automatically derives all related tokens from each main token. The function remains available for backward compatibility but is no longer necessary for new projects.

The `k-generate-color-variations()` function accepts three parameters:

- `name`. The name of the variable group for which you need to generate colors. This is a string value.
- `color`. The color value. The color can be a HEX or RGBA value.
- `theme`. The name of the theme for which you need to generate colors. For example `meridian`.

For example, this is how the surface, primary, and secondary color groups are customized using the function. To learn more, see [Customizing Color Sass Variables](/themes/kendo-themes/meridian/customization/#color-sass-variables).

```scss
@use 'sass:map';
@use '@progress/kendo-theme-meridian/scss/index.scss' as *;

$kendo-colors: map.merge(
  $kendo-colors,
  (
    app-surface: #fcfbff,
    on-app-surface: #211a2f,
    subtle: rgba(33, 26, 47, 0.64)
  )
);

$kendo-colors: map.merge($kendo-colors, k-generate-color-variations('base', #ebe7f5, 'meridian'));
$kendo-colors: map.merge($kendo-colors, k-generate-color-variations('primary', #7f56d9, 'meridian'));
$kendo-colors: map.merge($kendo-colors, k-generate-color-variations('secondary', #1f7ae0, 'meridian'));
$kendo-colors: map.merge($kendo-colors, k-generate-color-variations('tertiary', #00a3a3, 'meridian'));
$kendo-colors: map.merge($kendo-colors, k-generate-color-variations('success', #198754, 'meridian'));
$kendo-colors: map.merge($kendo-colors, k-generate-color-variations('warning', #ffb100, 'meridian'));
$kendo-colors: map.merge($kendo-colors, k-generate-color-variations('error', #dc3545, 'meridian'));

@include kendo-theme--styles();
```