New to Kendo UI for Angular? Start a free 30-day trial
Customizing Color System
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-colors | Map | $_default-colors | (app-surface: #ffffff, on-app-surface: #212529, subtle: #606970, surface: #f8f9fa, surface-alt: #ffffff, border: #dee2e6, border-alt: #ced4da, base-subtle: #e9ecef, base-subtle-hover: #dee2e6, base-subtle-active: #ced4da, base: #dee2e6, base-hover: #ced4da, base-active: #bdc4cb, base-emphasis: #adb5bd, base-on-subtle: #212529, on-base: #212529, base-on-surface: #212529, primary-subtle: #cfe2ff, primary-subtle-hover: #b6d4fe, primary-subtle-active: #9ec5fe, primary: #0d6efd, primary-hover: #0b5ed7, primary-active: #0a58ca, primary-emphasis: #6ea8fe, primary-on-subtle: #052c65, on-primary: #ffffff, primary-on-surface: #0d6efd, secondary-subtle: #dee2e6, secondary-subtle-hover: #ced4da, secondary-subtle-active: #bdc4cb, secondary: #6c757d, secondary-hover: #606970, secondary-active: #555c64, secondary-emphasis: #8d959d, secondary-on-subtle: #212529, on-secondary: #ffffff, secondary-on-surface: #212529, tertiary-subtle: #e2d9f3, tertiary-subtle-hover: #d3c5ec, tertiary-subtle-active: #c5b3e6, tertiary: #6f42c1, tertiary-hover: #59359a, tertiary-active: #4e2f89, tertiary-emphasis: #a98eda, tertiary-on-subtle: #21143b, on-tertiary: #ffffff, tertiary-on-surface: #6f42c1, info-subtle: #cff4fc, info-subtle-hover: #aaecfa, info-subtle-active: #86e5f8, info: #0dcaf0, info-hover: #0aa2c0, info-active: #098da8, info-emphasis: #3dd5f3, info-on-subtle: #04414d, on-info: #ffffff, info-on-surface: #0dcaf0, success-subtle: #d1e7dd, success-subtle-hover: #badbcc, success-subtle-active: #8cc3aa, success: #146c43, success-hover: #125f3b, success-active: #0f5132, success-emphasis: #479f76, success-on-subtle: #08291a, on-success: #ffffff, success-on-surface: #0f5132, warning-subtle: #ffecb5, warning-subtle-hover: #ffe69c, warning-subtle-active: #ffe083, warning: #ffc107, warning-hover: #cc9a06, warning-active: #b38705, warning-emphasis: #ffcd39, warning-on-subtle: #523e02, on-warning: #000000, warning-on-surface: #ffc107, error-subtle: #f8d7da, error-subtle-hover: #f5c2c7, error-subtle-active: #f1aeb5, error: #dc3545, error-hover: #b02a37, error-active: #9a2530, error-emphasis: #e35d6a, error-on-subtle: #421015, on-error: #ffffff, error-on-surface: #dc3545, light-subtle: #f8f9fa, light-subtle-hover: #e9ecef, light-subtle-active: #dee2e6, light: #f8f9fa, light-hover: #e9ecef, light-active: #dee2e6, light-emphasis: #bdc4cb, light-on-subtle: #343a40, on-light: #000000, light-on-surface: #ced4da, dark-subtle: #6c757d, dark-subtle-hover: #606970, dark-subtle-active: #555c64, dark: #212529, dark-hover: #2c3035, dark-active: #343a40, dark-emphasis: #343a40, dark-on-subtle: #ffffff, on-dark: #ffffff, dark-on-surface: #121417, inverse-subtle: #6c757d, inverse-subtle-hover: #606970, inverse-subtle-active: #555c64, inverse: #212529, inverse-hover: #2c3035, inverse-active: #343a40, inverse-emphasis: #343a40, inverse-on-subtle: #ffffff, on-inverse: #ffffff, inverse-on-surface: #121417, series-a: #0d6efd, series-a-bold: #0a53be, series-a-bolder: #052c65, series-a-subtle: #86b6fe, series-a-subtler: #4992fd, series-b: #6f42c1, series-b-bold: #4e2f89, series-b-bolder: #36215f, series-b-subtle: #b9a3e1, series-b-subtler: #8c68cd, series-c: #20c997, series-c-bold: #178c69, series-c-bolder: #10654c, series-c-subtle: #a6e9d5, series-c-subtler: #4dd4ac, series-d: #198754, series-d-bold: #125f3b, series-d-bolder: #0d442a, series-d-subtle: #8cc3aa, series-d-subtler: #479f76, series-e: #dc3545, series-e-bold: #9a2530, series-e-bolder: #6e1b23, series-e-subtle: #f1aeb5, series-e-subtler: #e35d6a, series-f: #ffc107, series-f-bold: #b38705, series-f-bolder: #806104, series-f-subtle: #ffe083, series-f-subtler: #ffcd39) |
Description
The global default Colors map. | |||
| $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, #146c43) |
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. | |||
