I'm trying to change the accent color for an Angular application developed with Kendo-UI. After a bit of searching I managed to understand what I have to change, and that is the $accent variable from the default value #ff6358 to any color you want.
To customize the Default Theme in one swoop, use the colors which are defined in the scss/_variables.scss file. Any change you make to the content of this file is propagated to every component.
To style a specific component, apply the variables which are used in its specific .scss file.
After you build the theme by running the npm run build command, the complete theme that you can use in your project will be available in the dist/all.css file.
I did all those things and when I check my all.css file, it's the same one than before. Any help would be much appreciated.
In Sass, the order of the declarations matters. You need to declare the new value of $accent first, and import Kendo's styles later, so they use the correct value.
$accent: #666666;
@import "~@progress/kendo-theme-default/scss/all";
(Less, on the other hand, is lazily evaluated and it's the last declaration that counts.)
More on Sass and overriding here: https://thoughtbot.com/blog/sass-default