Customized theme not applying

[Srinivas]

I followed all the steps but still I'm not able get my actual theme which I built in Theme Builder for bootstrap

https://www.telerik.com/kendo-angular-ui/components/styling/theme-bootstrap/

 

@import "~@progress/kendo-theme-bootstrap/dist/all.scss";

@import "~bootstrap/dist/css/bootstrap.css";

$primary: #695ed6;

$font-style-family: Open Sans;

$base-theme: Bootstrap;

$skin-name: all;

$swatch-name: Bootstrap;

$border-radius: 0.25rem;

$accent: #695ed6;

$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;

 

 

 

[Stoyan]

Hello Srinivas,

I've looked through your request and I've noticed a couple of things that need to be changed in order for the custom theme to work properly:

1. The variables have to be listed before the imports so that the new values can be applied to the default SCSS code.
2. I've noticed that you're importing the Bootstrap CSS while you should import Bootstrap SCSS. Please refer to the installation instructions in our documentation.

Please take a look at this StackBlitz example which I have prepared for you.

Regards,
Stoyan
Progress Telerik