Hi,
We are trying to customize component level theming using Kendo SAAS based monorepo shared. We are trying to customize primary and secondary color for our application in "_variable.scss". Problem is, its only taking actual color name (like blue or red...) and not hexadecimal color format(#007AB4) or equivalent RGB color format like rgb(0,122,180). Please refer below screenshot.
However most of the other SAAS variables are accepting hexadecimal color notations. Could you please suggest how to customize?
Also, Currently we are searching for component level SAAS variables for component level behavior by using developer tools and trying to find the same in Component level layout.scss or theme.scss files and updating those. Building the repository to generate all.css and referring the same in our application.
This is laborious work and taking lot of time. Is there any easy way to do component level theme or layout customization?
Please suggest.
1 Answer, 1 is accepted
May i ask for more information about why you need to modify the monorepo. I understand that your scenario might be complex, so your use-case will help us understand if we can improve the customisation further.
Our suggested way of customising the SASS variables is by defining the variable before you import the theme and the sass compiler will do the rest.
https://www.telerik.com/kendo-react-ui/components/styling/#toc-customizing-themes
For example, modifying the primary and secondary colours will look like this:
$primary: #ff0000;$secondary: #00ff00;@import '~@progress/kendo-theme-material/scss/all';The customisable variables of each component can be found in the corresponding "_variables.scss" of each theme:
- theme-default variables
- theme-bootstrap variables
- theme-material variables
As for the per-component customisation, we expose variables for most of our components styles. This variables can be observed in the corresponding "_variables.scss" file of the theme. For example, if the tabstrip colour must be changed, you can use the '$tabstrip-item-selected-text' variables to customise it.
Extending our example from above:
// Common$primary: #ff0000;$secondary: #00ff00;// Tabstrip$tabstrip-item-selected-text: #0000ff; @import '~@progress/kendo-theme-material/scss/all';I'd like to ask you for more information about your SASS compiler(node-sass or dart-sass) as well as which theme are you customising (default, bootstrap or material). I couldn't reproduce the problem with the hexadecimal colours of the variables. I'm checking with multiple sample-projects as well as with the following stackblitz example: https://stackblitz.com/edit/react-zm8g9s-54dpei?file=app%2Fstyles.scss
Still, there might be something i'm missing so any information on that will better help me investigate the problem.
Regards,
Kiril
Progress Telerik