How to dynamically change specific css styles for all syncfusion components in Angular?

[Jonas Czeslik]

Hello Syncfusion team,

first of all: I chose the "General Discussion" platform, although my question refers to Angular because my question is not bound to a specific component that I would have to chose. 

I am trying to create some dynamic css settings that have an impact on all of the syncfusion components and can be set by the user.
In a first attempt, I was giving SCSS a try, but that turned out to be a dead end, since it does not really have dynamic support and it only is a preprocessor.

Is there an elegant way to benefit from the cascading feature of CSS? I was hoping to adapt a specific root element withing the stylesheets that I created with the syncfusion theming studio, but I could not really find any.

Example: I would like to adapt all font-families of all components. Or I would like to make the primary/secondary color of a theme settable by the user.

Is there a best-practise connected to the syncfusion theming stylesheets?

Like always: Thanks in regard!

Jonas Czeslik

[Jesus Arockia Sankaran S]

Hi Jonas, 

Thank you for contacting Syncfusion support. 

We have checked your concerns and we want to inform you that Syncfusion components can be customized using SCSS compilation in build time. As of now, we are unable to dynamically change/compile styles in client side dynamically. But, we can send the color values to server side to compile the SCSS and receive the CSS content in client dynamically to change the Theme. 

We have already illustrated that using ASP.NET Webservice with LibSassHost  in the following Knowledge Base (KB) documentation. 

https://www.syncfusion.com/kb/12463/how-to-compile-the-syncfusion-theme-using-libsasshost-for-runtime-dynamic-theme-change 

Note: This KB document is minimal example for the webservice with LibSassHost.  

Please get back to us if you have any queries. 

Regards, 

Jesus Arockia Sankaran S