I try to understand how to do a theme customization. I created a sample project on stackblitz to try to overload the fluent theme variables in a project created with Vite.js; SASS; and React.
My problem is that I can't get changing the primary variable to change the color of the button. If anyone will have the answer to this problem.
Thanks in advance.
3 Answers, 1 is accepted
Rank 1
Iron
But there is no information about the gulp version to use. This code seem old because is a gulp old syntaxe.
If anyone can explain me how to build the fluent theme and its customization from scss because I'm not intrested by the theme builder way. I looking for a pure scss way to override scss kendo vars before building the theme
Thanks in advance
Rank 1
Iron
Hello,
I've managed to fix your issue. For the Fluent Theme, you can't just use $primary. Take a closer look at this:
https://www.telerik.com/kendo-react-ui/components/styling/theme-fluent/#toc-dynamic-customization
I've edited your sample code to work:
https://stackblitz.com/edit/vitejs-vite-zjrjgw
Hope this helps
Rank 1
Iron
I better undersand this now. I should use class/vars override in css on this way.
To refer to my last post here. I'm more intresting to compile my own fluent theme custiomization from scss. Have you any advises to do this that way ?
Rank 1
Iron
Unfortunately, I have no knowledge about that topic. But theme builder might be a good starting point on what can you change with the overrides with CSS. You can also define the primary color for the Fluent Theme like this for all elements:
:root {
--kendo-primary-10: #FFFFFF;
--kendo-primary-20: #FFFFFF;
--kendo-primary-30: #FFFFFF;
--kendo-primary-40: #FFFFFF;
--kendo-primary-50: #FFFFFF;
--kendo-primary-60: #FFFFFF;
--kendo-primary-70: #FFF5F7;
--kendo-primary-80: #FFDCE2;
--kendo-primary-90: #FFC2CD;
--kendo-primary-100: #FFC0CB;
--kendo-primary-110: #FFC2CB;
--kendo-primary-120: #FFA8B5;
--kendo-primary-130: #FF8FA0;
--kendo-primary-140: #FF7588;
--kendo-primary-150: #FF5C72;
--kendo-primary-160: #FF425B;
--kendo-primary-170: #FF2942;
--kendo-primary-180: #FF0F2B;
--kendo-primary-190: #F5001D;
--kendo-primary-200: #DB0016;
--kendo-primary-210: #C20013;
--kendo-primary-220: #A80011;
}
Hello,
I've managed to fix your issue. For the Fluent Theme, you can't just use $primary. Take a closer look at this:
https://www.telerik.com/kendo-react-ui/components/styling/theme-fluent/#toc-dynamic-customization
And check the implementation in this sample app:
https://stackblitz.com/edit/vitejs-vite-zjrjgw
Result:
Hope this helps.
Rank 1
Iron