Changing Primary Color for Kendo Angular Components
Environment
| Product | Progress® Kendo UI® for Angular |
Description
The $kendo-color-primary SCSS variable no longer changes the primary color of the Kendo components.
This Knowledge Base article also answers the following questions:
- How to use the available SCSS and CSS variables of the theme?
- Where can I find the available SCSS and CSS variables of the components?
Solution
Starting with v8.0.0 of the @progress/kendo-theme-*themeName*, a new Color System was introduced. This system provides a modern approach to implementing and customizing colors, making the following syntax incompatible:
$kendo-color-primary: #9c27b0 ;
@import '@progress/kendo-theme-material/dist/all.scss';The solution is to update the color customizations to align with the new Color System. This migration can be performed automatically or manually.
The following code snippet demonstrates how the primary color can be changed using the new Color System:
@use '@progress/kendo-theme-default/scss/all.scss' as * with (
$kendo-colors: (
primary: #9c27b0,
)
);You can also use the k-generate-color-variations(name, color, theme) function to generate all needed shades of a given color by lightening or darkening it. Check the Color Sass Variables topic for more details.
@use 'sass:map';
@use '@progress/kendo-theme-default/scss/index.scss' as *;
// Use the 'k-generate-color-variations' function to generate
// all shades of the 'primary' color.
$kendo-colors: map.merge($kendo-colors, k-generate-color-variations("primary", #9c27b0, "default"));
@include kendo-theme--styles();