New to Kendo UI for Angular? Start a free 30-day trial

Customizing ColorPreview

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-color-preview-border-radiusStringk-border-radius(md)var(--kendo-border-radius-md, 0.25rem)
Description
Border radius of the color preview.
$kendo-color-preview-border-widthNumber1px1px
Description
Border width of the color preview.
$kendo-color-preview-bgColortransparenttransparent
Description
Default background color of the color preview.
$kendo-color-preview-textStringinheritinherit
Description
Text color of the color preview.
$kendo-color-preview-borderStringif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 28%, transparent)
Description
Border color of the color preview.
$kendo-color-preview-hover-borderStringif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 28%, transparent)
Description
Hover Border color of the color preview.
$kendo-color-preview-no-color-bgStringif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)var(--kendo-color-app-surface, #ffffff)
Description
Background color of the color preview when no color is selected.
$kendo-color-preview-no-color-textStringif($kendo-enable-color-system, k-color( error-on-surface ), k-get-theme-color( error, 190 ))var(--kendo-color-error-on-surface, #a4262c)
Description
Text color of the color preview when no color is selected.
$kendo-color-preview-no-color-borderStringcurrentColorcurrentColor
Description
Border color of the color preview when no color is selected.

In this article

Not finding the help you need?