Customizing Color System
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-colors | Map | $_default-colors |
|
Description
The global default Colors map. | |||
|
Groups
The groups of the $kendo-colors Map | |||
| Group | Values | Description | |
| misc | app-surface, on-app-surface, subtle, surface, surface-alt, border, border-alt | The Misc variable group. | |
| base | base-subtle, base-subtle-hover, base-subtle-active, base, base-hover, base-active, base-emphasis, base-on-subtle, on-base, base-on-surface | The Base variable group. | |
| primary | primary-subtle, primary-subtle-hover, primary-subtle-active, primary, primary-hover, primary-active, primary-emphasis, primary-on-subtle, on-primary, primary-on-surface | The Primary variable group. | |
| secondary | secondary-subtle, secondary-subtle-hover, secondary-subtle-active, secondary, secondary-hover, secondary-active, secondary-emphasis, secondary-on-subtle, on-secondary, secondary-on-surface | The Secondary variable group. | |
| tertiary | tertiary-subtle, tertiary-subtle-hover, tertiary-subtle-active, tertiary, tertiary-hover, tertiary-active, tertiary-emphasis, tertiary-on-subtle, on-tertiary, tertiary-on-surface | The Tertiary variable group. | |
| info | info-subtle, info-subtle-hover, info-subtle-active, info, info-hover, info-active, info-emphasis, info-on-subtle, on-info, info-on-surface | The Info variable group. | |
| success | success-subtle, success-subtle-hover, success-subtle-active, success, success-hover, success-active, success-emphasis, success-on-subtle, on-success, success-on-surface | The Success variable group. | |
| warning | warning-subtle, warning-subtle-hover, warning-subtle-active, warning, warning-hover, warning-active, warning-emphasis, warning-on-subtle, on-warning, warning-on-surface | The Warning variable group. | |
| error | error-subtle, error-subtle-hover, error-subtle-active, error, error-hover, error-active, error-emphasis, error-on-subtle, on-error, error-on-surface | The Error variable group. | |
| light | light-subtle, light-subtle-hover, light-subtle-active, light, light-hover, light-active, light-emphasis, light-on-subtle, on-light, light-on-surface | The Light variable group. | |
| dark | dark-subtle, dark-subtle-hover, dark-subtle-active, dark, dark-hover, dark-active, dark-emphasis, dark-on-subtle, on-dark, dark-on-surface | The Dark variable group. | |
| inverse | inverse-subtle, inverse-subtle-hover, inverse-subtle-active, inverse, inverse-hover, inverse-active, inverse-emphasis, inverse-on-subtle, on-inverse, inverse-on-surface | The Inverse variable group. | |
| series-a | series-a, series-a-bold, series-a-bolder, series-a-subtle, series-a-subtler | The Series A variable group. | |
| series-b | series-b, series-b-bold, series-b-bolder, series-b-subtle, series-b-subtler | The Series B variable group. | |
| series-c | series-c, series-c-bold, series-c-bolder, series-c-subtle, series-c-subtler | The Series C variable group. | |
| series-d | series-d, series-d-bold, series-d-bolder, series-d-subtle, series-d-subtler | The Series D variable group. | |
| series-e | series-e, series-e-bold, series-e-bolder, series-e-subtle, series-e-subtler | The Series E variable group. | |
| series-f | series-f, series-f-bold, series-f-bolder, series-f-subtle, series-f-subtler | The Series F variable group. | |
|
Properties
The properties of the $kendo-colors Map | |||
| Type | Name | Description | |
| Color | app-surface | The background color of the application. | |
| Color | on-app-surface | The text color of the application. | |
| Color | subtle | The subtle text color. | |
| Color | surface | The background color of the components' chrome area. | |
| Color | surface-alt | The alternative background color of the components' chrome area. | |
| Color | border | The border color of the application. | |
| Color | border-alt | The alternative border color of the application. | |
| Color | base-subtle | The base subtle background color variable. | |
| Color | base-subtle-hover | The base subtle background color variable for the hover state. | |
| Color | base-subtle-active | The base subtle background color variable for the active state. | |
| Color | base | The base background color variable. | |
| Color | base-hover | The base background color variable for the hover state. | |
| Color | base-active | The base background color variable for the active state. | |
| Color | base-emphasis | The emphasized base color variable. | |
| Color | base-on-subtle | The text color variable for content on base subtle. | |
| Color | on-base | The text color variable for content on base. | |
| Color | base-on-surface | The text color variable for content on surface. | |
| Color | primary-subtle | The primary subtle background color variable. | |
| Color | primary-subtle-hover | The primary subtle background color variable for the hover state. | |
| Color | primary-subtle-active | The primary subtle background color variable for the active state. | |
| Color | primary | The primary background color variable. | |
| Color | primary-hover | The primary background color variable for the hover state. | |
| Color | primary-active | The primary background color variable for the active state. | |
| Color | primary-emphasis | The emphasized primary color variable. | |
| Color | primary-on-subtle | The text color variable for content on primary subtle. | |
| Color | on-primary | The text color variable for content on primary. | |
| Color | primary-on-surface | The text color variable for content on surface. | |
| Color | secondary-subtle | The secondary subtle background color variable. | |
| Color | secondary-subtle-hover | The secondary subtle background color variable for the hover state. | |
| Color | secondary-subtle-active | The secondary subtle background color variable for the active state. | |
| Color | secondary | The secondary background color variable. | |
| Color | secondary-hover | The secondary background color variable for the hover state. | |
| Color | secondary-active | The secondary background color variable for the active state. | |
| Color | secondary-emphasis | The emphasized secondary color variable. | |
| Color | secondary-on-subtle | The text color variable for content on secondary subtle. | |
| Color | on-secondary | The text color variable for content on secondary. | |
| Color | secondary-on-surface | The text color variable for content on surface. | |
| Color | tertiary-subtle | The tertiary subtle background color variable. | |
| Color | tertiary-subtle-hover | The tertiary subtle background color variable for the hover state. | |
| Color | tertiary-subtle-active | The tertiary subtle background color variable for the active state. | |
| Color | tertiary | The tertiary background color variable. | |
| Color | tertiary-hover | The tertiary background color variable for the hover state. | |
| Color | tertiary-active | The tertiary background color variable for the active state. | |
| Color | tertiary-emphasis | The emphasized tertiary color variable. | |
| Color | tertiary-on-subtle | The text color variable for content on tertiary subtle. | |
| Color | on-tertiary | The text color variable for content on tertiary. | |
| Color | tertiary-on-surface | The text color variable for content on surface. | |
| Color | info-subtle | The info subtle background color variable. | |
| Color | info-subtle-hover | The info subtle background color variable for the hover state. | |
| Color | info-subtle-active | The info subtle background color variable for the active state. | |
| Color | info | The info background color variable. | |
| Color | info-hover | The info background color variable for the hover state. | |
| Color | info-active | The info background color variable for the active state. | |
| Color | info-emphasis | The emphasized info color variable. | |
| Color | info-on-subtle | The text color variable for content on info subtle. | |
| Color | on-info | The text color variable for content on info. | |
| Color | info-on-surface | The text color variable for content on surface. | |
| Color | success-subtle | The success subtle background color variable. | |
| Color | success-subtle-hover | The success subtle background color variable for the hover state. | |
| Color | success-subtle-active | The success subtle background color variable for the active state. | |
| Color | success | The success background color variable. | |
| Color | success-hover | The success background color variable for the hover state. | |
| Color | success-active | The success background color variable for the active state. | |
| Color | success-emphasis | The emphasized success color variable. | |
| Color | success-on-subtle | The text color variable for content on success subtle. | |
| Color | on-success | The text color variable for content on success. | |
| Color | success-on-surface | The text color variable for content on surface. | |
| Color | warning-subtle | The warning subtle background color variable. | |
| Color | warning-subtle-hover | The warning subtle background color variable for the hover state. | |
| Color | warning-subtle-active | The warning subtle background color variable for the active state. | |
| Color | warning | The warning background color variable. | |
| Color | warning-hover | The warning background color variable for the hover state. | |
| Color | warning-active | The warning background color variable for the active state. | |
| Color | warning-emphasis | The emphasized warning color variable. | |
| Color | warning-on-subtle | The text color variable for content on warning subtle. | |
| Color | on-warning | The text color variable for content on warning. | |
| Color | warning-on-surface | The text color variable for content on surface. | |
| Color | error-subtle | The error subtle background color variable. | |
| Color | error-subtle-hover | The error subtle background color variable for the hover state. | |
| Color | error-subtle-active | The error subtle background color variable for the active state. | |
| Color | error | The error background color variable. | |
| Color | error-hover | The error background color variable for the hover state. | |
| Color | error-active | The error background color variable for the active state. | |
| Color | error-emphasis | The emphasized error color variable. | |
| Color | error-on-subtle | The text color variable for content on error subtle. | |
| Color | on-error | The text color variable for content on error. | |
| Color | error-on-surface | The text color variable for content on surface. | |
| Color | light-subtle | The light subtle background color variable. | |
| Color | light-subtle-hover | The light subtle background color variable for the hover state. | |
| Color | light-subtle-active | The light subtle background color variable for the active state. | |
| Color | light | The light background color variable. | |
| Color | light-hover | The light background color variable for the hover state. | |
| Color | light-active | The light background color variable for the active state. | |
| Color | light-emphasis | The emphasized light color variable. | |
| Color | light-on-subtle | The text color variable for content on light subtle. | |
| Color | on-light | The text color variable for content on light. | |
| Color | light-on-surface | The text color variable for content on surface. | |
| Color | dark-subtle | The dark subtle background color variable. | |
| Color | dark-subtle-hover | The dark subtle background color variable for the hover state. | |
| Color | dark-subtle-active | The dark subtle background color variable for the active state. | |
| Color | dark | The dark background color variable. | |
| Color | dark-hover | The dark background color variable for the hover state. | |
| Color | dark-active | The dark background color variable for the active state. | |
| Color | dark-emphasis | The emphasized dark color variable. | |
| Color | dark-on-subtle | The text color variable for content on dark subtle. | |
| Color | on-dark | The text color variable for content on dark. | |
| Color | dark-on-surface | The text color variable for content on surface. | |
| Color | inverse-subtle | The inverse subtle background color variable. | |
| Color | inverse-subtle-hover | The inverse subtle background color variable for the hover state. | |
| Color | inverse-subtle-active | The inverse subtle background color variable for the active state. | |
| Color | inverse | The inverse background color variable. | |
| Color | inverse-hover | The inverse background color variable for the hover state. | |
| Color | inverse-active | The inverse background color variable for the active state. | |
| Color | inverse-emphasis | The emphasized inverse color variable. | |
| Color | inverse-on-subtle | The text color variable for content on inverse subtle. | |
| Color | on-inverse | The text color variable for content on inverse. | |
| Color | inverse-on-surface | The text color variable for content on surface. | |
| Color | series-a | The series A color variable. | |
| Color | series-a-bold | The bold series A color variable. | |
| Color | series-a-bolder | The bolder series A color variable. | |
| Color | series-a-subtle | The subtle series A color variable. | |
| Color | series-a-subtler | The subtler series A color variable. | |
| Color | series-b | The series B color variable. | |
| Color | series-b-bold | The bold series B color variable. | |
| Color | series-b-bolder | The bolder series B color variable. | |
| Color | series-b-subtle | The subtle series B color variable. | |
| Color | series-b-subtler | The subtler series B color variable. | |
| Color | series-c | The series C color variable. | |
| Color | series-c-bold | The bold series C color variable. | |
| Color | series-c-bolder | The bolder series C color variable. | |
| Color | series-c-subtle | The subtle series C color variable. | |
| Color | series-c-subtler | The subtler series C color variable. | |
| Color | series-d | The series D color variable. | |
| Color | series-d-bold | The bold series D color variable. | |
| Color | series-d-bolder | The bolder series D color variable. | |
| Color | series-d-subtle | The subtle series D color variable. | |
| Color | series-d-subtler | The subtler series D color variable. | |
| Color | series-e | The series E color variable. | |
| Color | series-e-bold | The bold series E color variable. | |
| Color | series-e-bolder | The bolder series E color variable. | |
| Color | series-e-subtle | The subtle series E color variable. | |
| Color | series-e-subtler | The subtler series E color variable. | |
| Color | series-f | The series F color variable. | |
| Color | series-f-bold | The bold series F color variable. | |
| Color | series-f-bolder | The bolder series F color variable. | |
| Color | series-f-subtle | The subtle series F color variable. | |
| Color | series-f-subtler | The subtler series F color variable. | |
| $kendo-color-primary | Color | $primary | var(--kendo-color-primary, #0d6efd) |
Description
The color that focuses the user attention. Used for primary buttons and for elements of primary importance across the theme. | |||
| $kendo-color-primary-contrast | Color | k-contrast-color( $kendo-color-primary ) | var(--kendo-color-on-primary, #ffffff) |
Description
The color used along with the primary color denoted by $kendo-color-primary. Used to provide contrast between the background and foreground colors. | |||
| $kendo-color-secondary | Color | $secondary | var(--kendo-color-secondary, #6c757d) |
Description
The secondary color of the theme. | |||
| $kendo-color-secondary-contrast | Color | k-contrast-color( $kendo-color-secondary ) | white |
Description
The color used along with the secondary color denoted by $kendo-color-secondary. Used to provide contrast between the background and foreground colors. | |||
| $kendo-color-tertiary | Color | $purple | var(--kendo-color-tertiary, #6f42c1) |
Description
The tertiary color of the theme. | |||
| $kendo-color-tertiary-contrast | Color | k-contrast-color( $kendo-color-tertiary ) | white |
Description
The color used along with the tertiary color denoted by $kendo-color-tertiary. Used to provide contrast between the background and foreground colors. | |||
| $kendo-color-info | Color | $info | var(--kendo-color-info, #0dcaf0) |
Description
The color for informational messages and states. | |||
| $kendo-color-success | Color | $success | var(--kendo-color-success, #198754) |
Description
The color for success messages and states. | |||
| $kendo-color-warning | Color | $warning | var(--kendo-color-warning, #ffc107) |
Description
The color for warning messages and states. | |||
| $kendo-color-error | Color | $danger | var(--kendo-color-error, #dc3545) |
Description
The color for error messages and states. | |||
| $kendo-color-dark | Color | $dark | var(--kendo-color-dark, #212529) |
Description
The dark color of the theme. | |||
| $kendo-color-light | Color | $light | var(--kendo-color-light, #f8f9fa) |
Description
The light color of the theme. | |||
| $kendo-color-inverse | String | if( $kendo-is-dark-theme, $kendo-color-light, $kendo-color-dark ) | var(--kendo-color-dark, #212529) |
Description
Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark | |||
| $kendo-color-white | Color | #ffffff | #ffffff |
Description
The color white. Note: you cannot change this value. | |||
| $kendo-color-black | Color | #000000 | #000000 |
Description
The color black. Note: you cannot change this value. | |||
| $kendo-color-rgba-transparent | Color | rgba(0, 0, 0, 0) | rgba(0, 0, 0, 0) |
Description
The color transparent. Note: you cannot change this value. | |||
| $kendo-gradient-transparent-to-black | Gradient | rgba(black, 0), black | rgba(0, 0, 0, 0), black |
Description
A gradient that goes from transparent to black. Note: you cannot change this value. | |||
| $kendo-gradient-transparent-to-white | Gradient | rgba(white, 0), white | rgba(255, 255, 255, 0), white |
Description
A gradient that goes from transparent to white. Note: you cannot change this value. | |||
| $kendo-gradient-black-to-transparent | Gradient | black, rgba(black, 0) | black, rgba(0, 0, 0, 0) |
Description
A gradient that goes from black to transparent. Note: you cannot change this value. | |||
| $kendo-gradient-white-to-transparent | Gradient | white, rgba(white, 0) | white, rgba(255, 255, 255, 0) |
Description
A gradient that goes from white to transparent. Note: you cannot change this value. | |||
| $kendo-gradient-rainbow | Gradient | #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000 | #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000 |
Description
A gradient that cycles through the colors of the rainbow. Note: you cannot change this value. | |||
