Customizing Component
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-component-bg | String | k-map-get( $theme, component-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 | k-map-get( $theme, component-text ) | var(--kendo-color-on-app-surface, #212121) |
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 | k-map-get( $theme, component-border ) | var(--kendo-color-border, rgba(0, 0, 0, 0.12)) |
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;`. | |||
