Dynamically Changing the Component Styles in the Kendo UI Fluent Theme

Environment

Product

Progress® Kendo UI for Angular

Description

How can I dynamically change the component styles when using the Kendo UI Fluent Theme?

Solution

The Kendo UI Fluent Theme is based on CSS variables thus allowing you to change the values at runtime.

To customize the appearance of any Kendo UI for Angular component, use the setStyles method to change the value of the specific class CSS property.

To ensure the example works correctly, switch the theme to "Fluent Main" using the dropdown menu labeled "Change Theme".

The following example demonstrates how to dynamically change the header and background color of the Kendo UI for Grid component.

Change Theme

Theme

Loading ...