New to Kendo UI for Angular? Start a free 30-day trial
Customizing Component
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-component-bg | String | $kendo-body-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
Background color of a component. Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$kendo-grid-bg: $kendo-component-bg !default;`. | |||
| $kendo-component-text | String | $kendo-body-text | var(--kendo-color-on-app-surface, #3d3d3d) |
Description
Text color of a component. Note: do not use this variable directly. Instead derive it as `$component-name-text` e.g. `$kendo-grid-text: $kendo-component-text !default;`. | |||
| $kendo-component-border | String | rgba(if($kendo-is-dark-theme, $kendo-color-white, $kendo-color-black), 0.08) | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
Description
Border color of a component. Note: do not use this variable directly. Instead derive it as `$component-name-border` e.g. `$kendo-grid-border: $kendo-component-border !default;`. | |||
| $kendo-component-header-bg | String | $kendo-base-bg | var(--kendo-color-surface, #fafafa) |
Description
Background color of the component header. | |||
| $kendo-component-header-text | String | $kendo-base-text | var(--kendo-color-on-app-surface, #3d3d3d) |
Description
Text color of the component header. | |||
| $kendo-component-header-border | String | $kendo-base-border | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
Description
Border color of the component header. | |||
| $kendo-component-header-gradient | Null | null | null |
Description
Gradient of the component header. | |||
| $kendo-invalid-bg | Null | null | null |
Description
Background color of the invalid items. | |||
| $kendo-invalid-text | String | $kendo-color-error | var(--kendo-color-error, #f31700) |
Description
Text color of the invalid items. | |||
| $kendo-invalid-border | String | $kendo-color-error | var(--kendo-color-error, #f31700) |
Description
Border color of the invalid items. | |||
| $kendo-invalid-shadow | Null | null | null |
Description
Shadow of the invalid items. | |||
| $kendo-valid-bg | Null | null | null |
Description
Background color of the valid items. | |||
| $kendo-valid-text | Color | $kendo-color-success | #37b400 |
Description
Text color of the valid items. | |||
| $kendo-valid-border | Color | $kendo-color-success | #37b400 |
Description
Border color of the valid items. | |||
| $kendo-valid-shadow | Null | null | null |
Description
Shadow of the valid items. | |||
