This is a migrated thread and some comments may be shown as answers.

Not clear on how to use custom theme from themebuilder

5 Answers 747 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

BitShift asked on 05 Jul 2018, 02:33 PM

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

Accepted

answered on 06 Jul 2018, 06:51 AM

The recommended way of using the ThemeBuilder output is to use the build process of the application:

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

Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

answered on 06 Jul 2018, 05:22 PM

clipboard01.png

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