Change dynamically the theme at the runtime

1 Answer 582 Views
Extensions and Customization
Smail
Top achievements
Rank 1
Smail asked on 01 Oct 2021, 08:59 AM | edited on 01 Oct 2021, 09:36 AM

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

1 Answer, 1 is accepted

Sort by
0
Stoyan
Telerik team
answered on 05 Oct 2021, 12:17 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Extensions and Customization
Asked by
Smail
Top achievements
Rank 1
Answers by
Stoyan
Telerik team
Share this question
or