Use theme variables to customize color

[Dennis M]

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

[Visvesvar Venkatesan]

Hi Dennis,

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

Regards,

Visvesvar K V 

[Sinthiya Kalimuthu]

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

[Dennis M]

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.

• Install the Syncfusion Blazor Themes NPM package using the below command.

    npm install @syncfusion/blazor-themes

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

[Visvesvar Venkatesan]

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

[Visvesvar Venkatesan]

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.

[Dennis M]

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

[Visvesvar Venkatesan]

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

[Visvesvar Venkatesan]

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.