Im currently using the bootstrap theme and now looking at using a custom theme based on the bootstrap theme.
Looking over this, im not sure on how to place the output
https://www.telerik.com/kendo-angular-ui/components/styling/theme-builder/
When I download my theme, I have a zip file containing two files, all.css and variables.scss
For example, in the linked instructions above, do I use these paths and put the two files in the zip file into the scss/all folder?
// import configuration from the theme builder
@import 'variables.scss';
// import the base theme
@import '~@progress/kendo-theme-default/scss/all';
Or... since im using the bootstrap theme, I replace the files in @progress\kendo-theme-bootstrap\scss ???
Or, do I create a new folder under node_modules\@progress with the name of my new theme?
5 Answers, 1 is accepted
- Import the variable values
- Import the base theme (which in this scenario is @progress/kendo-theme-bootstrap)
This boils down to the following code in styles.scss (assuming you are using the Angular CLI defaults):
@import 'variables'; // the variables.scss file, located in the same folder
@import '~@progress/kendo-theme-bootstrap/scss/all'; // fetched from node_modules
Editing files in the node_modules directory is strongly discouraged, as this will cause them to break at the next npm install, or on different machines.
Regards,
Alex Gyoshev
Progress Telerik

So really all I need from the download is the variables.scss , correct? Now that I have converted my angular app to use scss, I changed my styles.css to styles.scss and added the imports mentioned above.
However, now that Im using scss, I wanted to test a change. I added a variable override in my variable.scss
Im not seeing any changes however.
$button-bg: #dc3545; // should show button background as red
angular.json
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"./node_modules/font-awesome/css/font-awesome.css",
"src/styles.scss"
],
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/popper.js/dist/umd/popper.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js"
]
"defaultProject": "ClientApp",
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
in ClientApp/src/styles.scss
@import 'variables'; // the variables.scss file, located in the same folder
@import '~@progress/kendo-theme-bootstrap/scss/all'; // fetched from node_modules
in ClientApp/src/variables.css (downloaded from themebuilder, see my variable at the bottom)
$base-theme:Bootstrap;
$skin-name:kendo-dflood-bs4-1;
$accent: #007bff;
$secondary: #e4e7eb;
$info: #17a2b8;
$success: #28a745;
$warning: #ffc107;
$error: #dc3545;
$body-bg: #ffffff;
$body-color: #292b2c;
$component-bg: #ffffff;
$component-color: #292b2c;
$card-cap-bg: #f7f7f9;
$card-cap-color: #292b2c;
$series-a: #0275d8;
$series-b: #5bc0de;
$series-c: #5cb85c;
$series-d: #f0ad4e;
$series-e: #e67d4a;
$series-f: #d9534f;
$button-bg: #dc3545; //should be red, but I see no impact
After these changes , with the app running with ng serve, a compile takes place and I see the browser refresh. However, the button is unaffected. Its still blue

The content that should be affected
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
<button kendoButton [primary]="true">Browse</button>
</div>

Indeed, the [primary] input property of the kendoButton adds a different class to the button in order to change its appearance and this is why it would not be affected by the $button-bg variable:
https://www.telerik.com/kendo-angular-ui/components/buttons/
Let us know in case further assistance is required for this case.
Regards,
Svetlin
Progress Telerik