Dynamically Changing Component Styles with CSS Variables
Environment
| Product | Progress® Kendo UI for Angular |
Description
How can I dynamically change the component styles at runtime in Kendo UI for Angular?
Solution
All Kendo UI for Angular themes are based on CSS variables. You can override these variables at runtime to customize the appearance of any component.
To change the styles dynamically, use the native style.setProperty method on the target element. Set the value of the desired CSS variable to the new color or style. For a full list of available CSS variables, refer to the Kendo UI Themes documentation.
To scope the CSS variable overrides to a specific component instance, set the property on the component element instead of
document.documentElement.
The following example demonstrates how to dynamically change the header and background color of the Grid component.