Add support for [drupal off canvas editor] and the [layout builder] settings try with vbp_color and vbp_colors mixins

As we are using SCSS with mixins we have changed

Vartheme BS4

scss/vbp-colors.theme.scss

and the Vartheme bs4 sub-theme template

VARTHEME_BS4_SUBTHEME/scss/vbp-colors.theme.scss

// Custom Varbase Bootstrap Paragraphs colors theme for VARTHEME_BS4_SUBTHEME .
// -----------------------------------------------------------------------------
@import "../../node_modules/bootstrap/scss/functions";  // Bootstrap functions.
@import "../../node_modules/bootstrap/scss/mixins";     // Bootstrap mixins.
@import "../variables";                   // VARTHEME_BS4_SUBTHEME variables.
@import "../mixins";                      // VARTHEME_BS4_SUBTHEME mixins.
// -----------------------------------------------------------------------------

// Add display so color shows.
.paragraph.paragraph--color {
  display: table;
}

// Adds padding to fill in color.
.paragraph.paragraph--color > .paragraph__column {
  padding-top: $jumbotron-padding;
  padding-bottom: $jumbotron-padding;
}

// Fills color on colorless .paragraph__column after color .paragraph__column.
.paragraph.paragraph--color + .paragraph > .paragraph__column {
  padding-top: $jumbotron-padding;
}

// Background colours;
// -----------------------------------------------------------------------------
// vbp_color_01: Blue
// vbp_color_02: Madison
// vbp_color_03: Dark Gray
// vbp_color_04: Light Gray
// vbp_color_05: Red

$vbp_color_01: #338ec7; // Blue
$vbp_color_02: #2c3e50; // Madison
$vbp_color_03: #a4a4a4; // Dark Gray
$vbp_color_04: #d3d3d3; // Light Gray
$vbp_color_05: #cc3c2d; // Red

// Foreground colours:
// -----------------------------------------------------------------------------
// vbp_foreground_color_01: White for background vbp_color_01 color.
// vbp_foreground_color_02: White for background vbp_color_02 color.
// vbp_foreground_color_03: White for background vbp_color_03 color.
// vbp_foreground_color_04: Black for background vbp_color_04 color.
// vbp_foreground_color_05: White for background vbp_color_05 color.

$vbp_foreground_color_01: #ffffff; // White
$vbp_foreground_color_02: #ffffff; // White
$vbp_foreground_color_03: #ffffff; // White
$vbp_foreground_color_04: #000000; // Black
$vbp_foreground_color_05: #ffffff; // White

// Varbase Bootstrap Paragraphs color default template for the vbp_color_{NUM}
// we could copy this mixin and change it for other type of styling options.
// This could be changed in your sub-theme, in the way you custom sites.
@mixin vbp_color($vbp_color_name, $vbp_background_color, $vbp_foreground_color) {
  #{$vbp_color_name} {
    background-color: $vbp_background_color;
    color: $vbp_foreground_color;

    a {
      color: $vbp_foreground_color;

      &:hover,
      &:focus,
      &:active,
      &.is-active,
      &.active {
        color: $vbp_foreground_color;
      }
    }
  }
}

// Varbase Bootstrap Paragraphs colors default template.
// This could be changed in your sub-theme, in the way you custom sites.
@mixin vbp_colors {

  // Only listing 5 colors, this could work in a loop.
  // or by writing the list of css color classes manually.
  @include vbp_color(".vbp_color_01", $vbp_color_01, $vbp_foreground_color_01);
  @include vbp_color(".vbp_color_02", $vbp_color_02, $vbp_foreground_color_02);
  @include vbp_color(".vbp_color_03", $vbp_color_03, $vbp_foreground_color_03);
  @include vbp_color(".vbp_color_04", $vbp_color_04, $vbp_foreground_color_04);
  @include vbp_color(".vbp_color_05", $vbp_color_05, $vbp_foreground_color_05);

}

// Call the vbp_colors mixin for the front-end use.
@include vbp_colors;

// Add support for drupal off canvas editor and the layout builder settings try.
#drupal-off-canvas {
  @include vbp_colors;
}