Overriding the primary CSS colour

[Taylan]

Hi,

I'm using Syncfusion with the tailwind theme and was wondering if there's a way to override the main colour in a single line without having to find every class using the primary colour and manually adding that CSS to my CSS file and overriding the colour.

Thanks

[Jamuna Sundaram]

Hi Taylan ,

Greetings from Syncfusion support.

We are evaluating your reported scenario .We will update further details on 13 Dec 2022.


Regards
Jamuna Sundaram

[Jamuna Sundaram]

Hi Taylan ,

 
We have created  a vue sample using scss  for tailwind theme, as you mentioned we have customized the primary color by overriding the existing $primary variable.  On modifying  this variable the changes will  reflected for all the components which uses $primary as a variable name. Also , if you want customize the entire control  you can achieve this by changing the variables maintained as $primary-text-color, $success, $content-text-color-alt1. So, you can find reference of variable in the below UG documentation. For tailwind theme the definition file is maintained in folder path as mentioned here (../node_modules/@syncfusion/ej2-base/styles/definition/_tailwind.scss) .In this definition file if you override the primary color variable in the application level it will be reflected in the areas were $primary color is utilized ,based on this we have modified a vue sample in this primary color variable has been overridden due to this primary color used in the sample is been changed for the components you can refer the below sample,





Please refer the below UG documentation,

https://ej2.syncfusion.com/vue/documentation/appearance/theme/#tailwind-css-theme

Please refer the below sample,

https://www.syncfusion.com/downloads/support/directtrac/general/ze/vue-sample-1713191356.zip


Regards

Jamuna Sundaram