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

Use theme variables to customize color

Hi,

At the following link it states 

The following list of common variables is used in the Syncfusion Blazor library themes for all UI components. You can change these variables to customize the corresponding theme.

https://blazor.syncfusion.com/documentation/appearance/theme-studio#common-variables

That is followed by tables of the themes and variable names.



I would like to change the value for $accent and $primary only and I do not want to use theme studio as it is too complicated to maintain this every time I update the NuGet packages for just 2 color changes. 

How do we use these variables? I want to change/override the values for these variables with c# code, <style> or javascript.

Thanks,

Dennis



8 Replies

VV Visvesvar Venkatesan Syncfusion Team October 28, 2022 08:57 AM

Hi Dennis,


We are analyzing the reported issue. We will update further details on October 31, 2022.



Regards,

Visvesvar K V 



SK Sinthiya Kalimuthu Syncfusion Team October 31, 2022 11:21 AM

Hi Dennis,


You can use npm package to customize two theme colors alone by using the as below mentioned link. Kindly refer to it and revert to us if you have any concerns about it.


Link - https://blazor.syncfusion.com/documentation/appearance/themes#npm-package-reference


Regards,

Sinthiya K



DM Dennis M November 7, 2022 11:12 PM

Hi Sinthiya,

I made an attempt with your suggested option of using the Blazor Themes npm package. It is a heavy procedure to carry out and maintain if only to enable overriding 2 colors. Even just setting up NPM for a Blazor project is a significant overhead if there are no other NPM packages required in the project. There are many manual steps required to make this approach work (VS2022 latest). 

Maybe I missed something? But the procedure in the link seems to be incomplete as first one would need to setup npm support in the blazor project that is not shown in the procedure.

Is there an easier way to customize 2 colors without needing the Blazor Themes npm package? Could it be done with the Syncfusion.Blazor.Themes NuGet package as that would be my preference. This way, I would update the  Syncfusion NuGet packages at the same time for each new release.

I have also tried with Syncfusion Theme Studio but ran into issues there, so have raised another support request for that.

Regards,

Dennis



VV Visvesvar Venkatesan Syncfusion Team November 8, 2022 02:31 PM

We are analyzing the reported issue and we will update the further details tomorrow.



VV Visvesvar Venkatesan Syncfusion Team November 9, 2022 02:35 AM

We can customize using the SCSS link. Kindly find the documentation for it below.


Documentation - https://blazor.syncfusion.com/documentation/appearance/themes#npm-package-reference


We can also edit using theme studio. Kindly find the documentation for it below.


Documentation
- https://ej2.syncfusion.com/themestudio/?theme%20=fluent


We don’t have any support other than these two.



DM Dennis M November 9, 2022 06:39 PM

Hi Visvesvar,

Would it be possible to get access to the scss files via any NuGet package, such as Syncfusion.Blazor.Themes? 

I can see the scss files can be downloaded from the NPM package or manually from Theme Studio but getting these via the Nuget would make it so much easier to get the updates and then use Web Compiler to compile the scss into custom css.

Also, is there a CDN link to get access to the latest scss files?

For anyone else following, my problem with Theme Studio was that I had to go into the filter and select PDF Viewer.

Regards,

Dennis



VV Visvesvar Venkatesan Syncfusion Team November 10, 2022 11:17 AM

We are analyzing the reported issue and we will update you with further details regarding the issue tomorrow.



VV Visvesvar Venkatesan Syncfusion Team November 11, 2022 04:45 AM


We couldn’t change the values of $accent and $primary without using SCSS files. If you want to override the default available colors, please refer the below link


https://www.w3schools.com/css/css3_variables_overriding.asp


We have considered this as a new feature request at our end, the status of which can be tracked through the below feedback link


Feedback: https://www.syncfusion.com/feedback/39002/provide-support-to-customize-theme-colors-without-using-scss-or-theme-studio


Currently, we don’t have any immediate plans to implement this feature, we will mark the below feedback as scheduled once we planned for a release. Please upvote this feature to make this our priority. While this feature itself is important we will prioritize the features every release based on user demands.. If you have any suggestions/ specifications for the feature request, you can add them as a comment in the portal.


Loader.
Live Chat Icon For mobile
Up arrow icon