Customized theme not applying

1 Answer 360 Views
Styling
Srinivas
Top achievements
Rank 2
Iron
Veteran
Iron
Srinivas asked on 12 Jun 2021, 04:20 AM

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-familyOpen Sans;
$base-theme: Bootstrap;
$skin-nameall;
$swatch-name: Bootstrap;
$border-radius0.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;

 

 

 

1 Answer, 1 is accepted

Sort by
0
Accepted
Stoyan
Telerik team
answered on 16 Jun 2021, 02:52 PM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Styling
Asked by
Srinivas
Top achievements
Rank 2
Iron
Veteran
Iron
Answers by
Stoyan
Telerik team
Share this question
or