Fluent Theme

Variables

The Telerik and Kendo UI Fluent theme employs SASS variables and CSS custom properties (known as CSS variables) that you can use to customize the theme.

Variables by Scope

When it comes to the effect that a specific change in a variable's value causes, variables are not equal. Changing some values will have a much wider impact on the theme than changing others.

Depending on the extent of the styles that each variable controls, the variables fall into three main groups:

• Global variables—They control globally used theme colors like $kendo-color-primary, $kendo-color-secondary, $kendo-color-success, $kendo-color-error.
• Variables affecting all UI components—For example,  $kendo-component-text, $kendo-component-bg.
• Variables affecting individual UI components—For example, $kendo-grid-bg, $kendo-tabstrip-font-size.

Most component-level variables link to generic variables that are higher in the hierarchy. For instance, you can customize the background of the Grid component both through the $kendo-component-bg and $kendo-grid-bg variables. In this case, consider that the $kendo-grid-bg variable references $kendo-component-bg.

SASS Variables

The Telerik and Kendo UI Fluent theme uses the Sass Module System, so you can customize its variables by using either of the following two approaches:

• Configuration with with

  @use "index.scss" as kendo-theme with (
  $kendo-component-bg: #f7f7f7,
  $kendo-component-text: #1f2328,
  $kendo-input-solid-bg: #f0f0f0
  )
  
  @include kendo-theme.config();
  @include kendo-theme.styles();
  

• Direct assignment

  @use "index.scss" as kendo-theme;
  
  kendo-theme.$kendo-component-bg: #f7f7f7;
  kendo-theme.$kendo-component-text: #1f2328;
  kendo-theme.$kendo-input-solid-bg: #f0f0f0;
  
  @include kendo-theme.config();
  @include kendo-theme.styles();
  

CSS Variables

If you intend to customize the theme variables, you don't have to compile the theme. The Telerik and Kendo UI Fluent theme also provides custom CSS properties that allow you to customize the theme after compiling or even dynamically at runtime.

Global Variables

The global variables and the variables affecting all UI components are exposed at the root element level so you can customize them by using the following approach:

:root {
--kendo-component-bg: #f7f7f7;
--kendo-component-text: #1f2328;
}

Component Variables

The variables that affect individual UI components are also exposed in the theme so you can customize them as well:

:root {
--kendo-input-solid-bg: #f0f0f0;
}

List of Variables

The following tables represent the variables in the Telerik and Kendo UI Fluent theme by the type of styles that they control.

Typography Variables

The typography Sass variables set the styles related to fonts and text.

Common Variables

The common Sass variables control a wide range of styles that are not related to a specific UI component.

Component Variables

The component Sass variables are dedicated to a specific UI component and control its styles.

Color-System Variables

The color-system Sass variables control the theme styles related to color.

Charts Variables

The Chart Sass variables are specific to the Chart UI component. They do not affect other components.