We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

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

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.

2 Replies

LD LeoLavanya Dhanaraj Syncfusion Team November 9, 2022 11:45 AM

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.


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




Leo Lavanya Dhanaraj

AT Amarender Tangella replied to LeoLavanya Dhanaraj November 16, 2022 11:02 AM

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

Live Chat Icon For mobile
Up arrow icon