Change dynamically the theme at the runtime

[Smail]

I'm using Angular, I want to change the theme dynamically at the runtime, It's not evident the change the sass variables at the runtime -we can't -,

I've seen your Sass ThemeBuilder https://themebuilder.telerik.com/kendo-angular-ui

I'm looking for a similar solution, how could you apply the color changes dyanmically ?

Thanks in advance

[Stoyan]

Hi Smail,

Thanks for the provided information.

Indeed when using the SASS variables to change the default theme colors then the application needs to be recompiled so that the proper CSS is generated. 

What I can suggest at this point is to use CSS custom properties(variables). Combining it with CSSStyleDeclaration.setProperty() which allows setting a new value for a property on a CSS style declaration object.

Please see the following StackBlitz demo that demonstrates the suggestion:

https://stackblitz.com/edit/grid-change-color-with-colorpicker?file=app/app.component.ts

Changing the color dynamically will further require the use of ngDoCheck. This will invoke a custom change-detection function and change the colors depending on the ColorPicker choice. Indeed this is a custom CSS scenario and the purpose of this example is to demonstrate a way of achieving the requirement. However, the suggested implementation should be used at the developer's own discretion as it isn't supported as a built-in feature of Kendo UI for Angular.

I can further suggest checking the following articles on the topic:

https://medium.com/@amcdnl/theming-angular-with-css-variables-3c78a5b20b24

https://coryrylan.com/blog/theming-angular-apps-with-css-custom-properties

Also please check this sample application which allows the user to change the theme loaded by the app:

https://telerik.github.io/kendo-angular/coffee-warehouse/

Here is the source code of the demo:

https://github.com/telerik/kendo-angular/tree/master/examples-standalone/coffee-warehouse

I hope this helps.

Regards,
Stoyan
Progress Telerik