Child Theme Variables aren't working

[dymond]

This is no longer a working method for doing a color swap:

For example: the "$brand-primary" variable is used by both, Bootstrap and UnderStrap. Add your own color like: $brand-primary: #ff6600; in /sass/theme/_child_theme_variables.scss to overwrite it. That will change automatically all elements who use this variable.

As pointed out here and "resolved" here, the issue seems to either require copying all three color maps BS uses into your _child_theme_variables.scss or modifying Bootstrap files, which is not ideal. I think the documentation should at least be updated with a warning that this method won't work anymore. Any ideas on how to resolve this issue quickly?

[holger1411]

The problem is changes to the BS4 original file will be overwritten after a npm install
As far as I could see that problem will be solved with the next BS release.
So we just need a workaround for the time in between.

So copying the color system part from Bootstrap4 variables file and remove the "!default" flag like:

//
// Color system
//

$white:  #fff ;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #868e96;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black:  #000;

$grays: (
  100: $gray-100,
  200: $gray-200,
  300: $gray-300,
  400: $gray-400,
  500: $gray-500,
  600: $gray-600,
  700: $gray-700,
  800: $gray-800,
  900: $gray-900
);

$blue:    #007bff;
$indigo:  #6610f2;
$purple:  #6f42c1;
$pink:    #e83e8c;
$red:     #dc3545;
$orange:  #fd7e14;
$yellow:  #ffc107;
$green:   #28a745;
$teal:    #20c997;
$cyan:    #17a2b8;

$colors: (
  blue: $blue,
  indigo: $indigo,
  purple: $purple,
  pink: $pink,
  red: $red,
  orange: $orange,
  yellow: $yellow,
  green: $green,
  teal: $teal,
  cyan: $cyan,
  white: $white,
  gray: $gray-600,
  gray-dark: $gray-800
);

$theme-colors: (
  primary: #blue,
  secondary: $gray-600,
  success: $green,
  info: $cyan,
  warning: $yellow,
  danger: $red,
  light: $gray-100,
  dark: $gray-800
);

at the top of your sass/theme/_theme_variables.scss (or _child_theme_variables.scss) seems to be the way to go till the next update. Than you can just remove it and you are good to go.

If you wanna change just one colors you just need to copy over some parts. For example if you wanna replace your primary color with "red" instead of "blue" this should be working:

$red:     #dc3545;

$theme-colors: (
  primary: $red,
);

If you now change the $red variable it will be changed everywhere (don´t forget to remove the !default flag!) and will be used as primary color, too.

[dymond]

Thanks! I've been using a slightly modified version of this, but I was hoping there was a better solution until the BS update goes live. This will work for the time being though.