How can I override syncfusion SCSS variables with my preferred values?

[Amarender Tangella]

I am using Syncfusion with the Angular app. We have our own set of colors for each component. So far, I am overriding the Syncfusion styles with my preferred styles. I want a better way to do this instead of overriding each time. I see there are some Syncfusion variables defined in each component like the image below. I am planning on redefining those variables with my preferred colors instead of overwriting the whole style again. Do you have documentation of SCSS variables to redefine the colors? How can I achieve this effectively? Do themes work for my purpose? Thanks in advance.

[LeoLavanya Dhanaraj]

Hi Amarender,

Greetings from Syncfusion support.

You can override the SCSS variables after referring its definition file to achieve your requirement instead of adding !default flag to each variable. You can override the required variables alone from the definition file. 

We have discussed the similar case in the below mentioned forum.

https://www.syncfusion.com/forums/137888/overriding-scss-variables

Also, check out the below mentioned links to know more about furthe details.

https://ej2.syncfusion.com/angular/documentation/appearance/overview/#compiling-themes-from-scss-source-file

https://ej2.syncfusion.com/angular/documentation/getting-started/angular-cli/#adding-scss-reference

Regards,

Leo Lavanya Dhanaraj

[Amarender Tangella]

Thanks for the response. I would like to know if the variables change in near future.

[Indhumathy Loganathan]

Amarender, We were not clear about the exact variable change that you are expecting at our end. In our previous update, we shared a solution to overwrite the SCSS style with the help of !default flag. Share with us more details regarding the exact query.