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: #323130, subtle: #605e5c, surface: #faf9f8, surface-alt: #ffffff, border: #8a8886, border-alt: #323130, base-subtle: #edebe9, base-subtle-hover: #e1dfdd, base-subtle-active: #d2d0ce, base: #ffffff, base-hover: #f3f2f1, base-active: #edebe9, base-emphasis: #605e5c, base-on-subtle: #323130, on-base: #323130, base-on-surface: #323130, primary-subtle: #deecf9, primary-subtle-hover: #c7e0f4, primary-subtle-active: #abd1ef, primary: #0078d4, primary-hover: #106ebe, primary-active: #005a9e, primary-emphasis: #004578, primary-on-subtle: #001c30, on-primary: #ffffff, primary-on-surface: #0078d4, secondary-subtle: #faf9f8, secondary-subtle-hover: #f3f2f1, secondary-subtle-active: #edebe9, secondary: #979593, secondary-hover: #8a8886, secondary-active: #797775, secondary-emphasis: #605e5c, secondary-on-subtle: #323130, on-secondary: #ffffff, secondary-on-surface: #605e5c, tertiary-subtle: #deecf9, tertiary-subtle-hover: #bfdbf3, tertiary-subtle-active: #aacfef, tertiary: #2b88d8, tertiary-hover: #287ec7, tertiary-active: #2473b7, tertiary-emphasis: #2169a6, tertiary-on-subtle: #174974, on-tertiary: #ffffff, tertiary-on-surface: #2b88d8, info-subtle: #cee5ff, info-subtle-hover: #add4ff, info-subtle-active: #8dc3ff, info: #0a7eff, info-hover: #096edf, info-active: #085ebf, info-emphasis: #064f9f, info-on-subtle: #032040, on-info: #ffffff, info-on-surface: #096edf, success-subtle: #dff6dd, success-subtle-hover: #c8e8c6, success-subtle-active: #b1dbaf, success: #55a554, success-hover: #3e973e, success-active: #278a27, success-emphasis: #107c10, success-on-subtle: #063206, on-success: #ffffff, success-on-surface: #107c10, warning-subtle: #fff4ce, warning-subtle-hover: #ffedad, warning-subtle-active: #ffe58d, warning: #ffc80a, warning-hover: #f5c000, warning-active: #e0b000, warning-emphasis: #4e4d4b, warning-on-subtle: #323130, on-warning: #323130, warning-on-surface: #7a6000, error-subtle: #fde7e9, error-subtle-hover: #f3d2d4, error-subtle-active: #e9bcbf, error: #c2666b, error-hover: #b85156, error-active: #ae3b41, error-emphasis: #a4262c, error-on-subtle: #420f12, on-error: #ffffff, error-on-surface: #a4262c, light-subtle: #faf9f8, light-subtle-hover: #f3f2f1, light-subtle-active: #edebe9, light: #d2d0ce, light-hover: #c8c6c4, light-active: #a19f9d, light-emphasis: #e1dfdd, light-on-subtle: #323130, on-light: #323130, light-on-surface: #d2d0ce, dark-subtle: #a19f9d, dark-subtle-hover: #979593, dark-subtle-active: #8a8886, dark: #323130, dark-hover: #201f1e, dark-active: #000000, dark-emphasis: #797775, dark-on-subtle: #201f1e, on-dark: #ffffff, dark-on-surface: #323130, inverse-subtle: #a19f9d, inverse-subtle-hover: #979593, inverse-subtle-active: #8a8886, inverse: #323130, inverse-hover: #201f1e, inverse-active: #000000, inverse-emphasis: #797775, inverse-on-subtle: #201f1e, on-inverse: #ffffff, inverse-on-surface: #323130, series-a: #0099bc, series-a-bold: #00738d, series-a-bolder: #004d5e, series-a-subtle: #40b3cd, series-a-subtler: #80ccdd, series-b: #e74856, series-b-bold: #ad3641, series-b-bolder: #74242b, series-b-subtle: #ed7680, series-b-subtler: #f3a3aa, series-c: #ffb900, series-c-bold: #bf8b00, series-c-bolder: #805d00, series-c-subtle: #ffcb40, series-c-subtler: #ffdc80, series-d: #096edf, series-d-bold: #064f9f, series-d-bolder: #042f60, series-d-subtle: #2b8fff, series-d-subtler: #6cb2ff, series-e: #8764b8, series-e-bold: #654b8a, series-e-bolder: #44325c, series-e-subtle: #a58bca, series-e-subtler: #c3b1db, series-f: #00cc6a, series-f-bold: #009950, series-f-bolder: #006635, series-f-subtle: #40d98f, series-f-subtler: #80e5b4) |
Description
The global default Colors map. | |||
| $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. | |||
