Customising Bootstrap theme colours

[David]

Hi,

The default Bootstrap and Kendo UI Bootstrap theme colours are not completely WCAG compliant. Before the introduction of the new colour system I was able to customise the colour of both Bootstrap and the Kendo UI Bootstrap theme in my index.scss to improve contrast very simply as follows:

/* ---------- begin bootstrap customisation ---------- */
$primary: blue;
$secondary: #495057;
$warning: #fa991f;
$info: teal;

$font-family-base: "Calibri";
/* ---------- end bootstrap customisation ---------- */

/* ---------- start kendo customisation ---------- */
$kendo-font-family: $font-family-base;
/* ---------- end kendo customisation ----------*/

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

The Bootstrap colour variable overrides combined with the order of imports was sufficient for the Kendo theme colours to inherit the change.

The colour system has now completely changed. From what I can see I will need to upgrade in multiple steps e.g. from v7 to v8 following the breaking changes guidance and then again from v8 to v10 for the new Dart sass breaking changes.

Could you please confirm that I will now have to perform separate overrides for both Bootstrap and and Kendo UI Bootstrap theme colours? Are you able to provide an example based on the snippet provided above?

Kind regards,

David

[David]

Hi,

Could you please confirm if this is the best way to replicate the desired behaviour from the snipped provided last week?

/* ---------- begin bootstrap customisation ---------- */
$primary: blue;
$secondary: #495057;
$warning: #fa991f;
$info: teal;

$font-family-base: "Calibri";
/* ---------- end bootstrap customisation ---------- */

// NOTE: customising bootstrap scss variables no longer has an effect on the Telerik UI theme, see
// https://www.telerik.com/design-system/docs/themes/release-notes/breaking-changes/v10-0-0/

/* ---------- start kendo customisation ---------- */
@use "sass:map";
@use "/node_modules/@progress/kendo-theme-bootstrap/scss/index.scss" as * with (
    $kendo-font-family: $font-family-base
);

$kendo-colors: map.merge($kendo-colors, k-generate-color-variations("primary", $primary, "bootstrap"));
$kendo-colors: map.merge($kendo-colors, k-generate-color-variations("secondary", $secondary, "bootstrap"));
$kendo-colors: map.merge($kendo-colors, k-generate-color-variations("warning", $warning, "bootstrap"));
$kendo-colors: map.merge($kendo-colors, k-generate-color-variations("info", $info, "bootstrap"));
/* ---------- end kendo customisation ----------*/

// kendo
@include kendo-theme--styles();
// import bootstrap
@import "/node_modules/bootstrap/scss/bootstrap.scss";

Kind regards,

David

[Vessy]

Hi, David,

Yes, I ca confirm that using the k-generate-color-variations(name, color, theme) function that is part of the @progress/kendo-theme-core package is the correct way to customize the theme. 

For additional information on the color customization, refer to the dedicated articles on our design system docs:

• https://www.telerik.com/design-system/docs/themes/kendo-themes/bootstrap/customization/#color-sass-variables 
  
• https://www.telerik.com/design-system/docs/themes/kendo-themes/bootstrap/swatches/#color-sass-variables 

Let me know if you have additional questions or I could assist you further on this matter. 

Regards,
Vessy
Progress Telerik