can't change $component-active-bg to my theme color

[blackinitial]

i was created custom style bootstrap,
i want to change active bg on nav-pill from blue to green on my theme color.
i try to change var $component-active-bg to theme-color("primary") $component-active-bg: theme-color("primary"); , but the color not change to green.

so i was changed with var $nav-pills-link-active-bg: theme-color("primary"); and success.

is it a bug ??

[ysds]

It seems to be related with #27378.

demo1: https://codepen.io/fellows3/pen/WYBbEM

$theme-colors: (
  "primary": green
);

demo2: https://codepen.io/fellows3/pen/ZmNYNd

$primary: green;

@MartijnCuppens Any thoughts?

[blackinitial]

still not change, if i use $component-active-bg, i was try :

$primary: #20bf6b;
$component-active-bg: $primary;

but if use $nav-pills-link-active-bg active bg changed:

$primary: #20bf6b;
$nav-pills-link-active-bg: $primary;

its look same with my question above, only different theme-color("primary") to $primary.

[ysds]

I'm not sure how you would overwrite SCSS, but you need to include your custom variables before including bootstrap's SCSS.
https://getbootstrap.com/docs/4.1/getting-started/theming/#variable-defaults

[blackinitial]

@ysds

this is how i create my custom theme default.scss

// 1. core variables and mixins
@import "../bootstrap/functions";
@import "../bootstrap/variables";
@import "../bootstrap/mixins";

// 2. custom core variables

// colors
@import "_partials/colors";

and this is _partials/colors.scss

/ colors from http://flatuicolors.com/ german pallette
$theme-colors : (
  "primary":    #20bf6b,
  "secondary":  #778ca3,
  "success":    #26de81,
  "info":       #4b7bec,
  "warning":    #fed330,
  "danger":     #fc5c65,
  "light":      #ffffff,
  "dark":       #343a40
);

// color body
$body-bg:                 $white;
$body-color:              #423f54;
// $yiq-text-dark:         #423f54;

// link colors
$link-color:            theme-color("primary");
$link-hover-color:      darken($link-color, 15%);
$link-hover-decoration: none;

// component
$component-active-color:      $white;
// $component-active-bg:         theme-color("primary"); // can't use
$nav-pills-link-active-bg:    theme-color("primary");

// dropdown
$dropdown-link-active-bg:     theme-color("primary");

is this right??

[MartijnCuppens]

@blackinitial, you'll need to define your variables before including bootstrap. You can read about that here: http://getbootstrap.com/docs/4.1/getting-started/theming/#variable-defaults

However, when overriding across Sass files, your overrides must come before you import Bootstrap’s Sass files.

[MartijnCuppens]

Ow, and it is also better to change the theme colors here, because these variables are also used later in the variables file:

bootstrap/scss/_variables.scss

Lines 69 to 76 in c70b043

	$primary: $blue !default;
	$secondary: $gray-600 !default;
	$success: $green !default;
	$info: $cyan !default;
	$warning: $yellow !default;
	$danger: $red !default;
	$light: $gray-100 !default;
	$dark: $gray-800 !default;

[blackinitial]

oh ok, i delete $theme-color and use variable $primary etc..